background: transparent;

ソースコードの中の←◆の部分の「background: transparent」が、最下部の「このページとは別のページの例①」の様に「HTML」のtransparent指定や、「CSS」のbackground-color: #666666;の様に指定されていないので、質問文の中の「background: transparent」の記述の意味がわかりません。「background: transparent」で検索しても、「background-color: #666666;」の様に実際の色を指定した例を挙げたサイトしか見当たりませんでした。transparentが要素を透明にすることはわかるのですが、ソースコード中の←◆の部分の「background: transparent」は、実際にどの部分を透明にするのでしょうか？

<!DOCTYPE html> <html class="no-js seed-csp4" lang="en"> <head> <meta charset="utf-8"> <title>Nothing found for Wp Archives 166493</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" href="http://monopowers.com/profile/wordpress/wp-content/plugins/coming-soon/themes/default/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="http://monopowers.com/profile/wordpress/wp-content/plugins/coming-soon/themes/default/style.css"> <style type="text/css"> /* calculated styles */

/* Background Style */
html{
height:100%;
background: #fafafa;
}
.seed-csp4 body{
height:100%;
background: transparent; ←◆
}

/* Text Styles */
.seed-csp4 body{
font-family: Helvetica, Arial, sans-serif }
.seed-csp4 h1, .seed-csp4 h2, .seed-csp4 h3, .seed-csp4 h4, .seed-csp4 h5, .seed-csp4 h6{
font-family: Helvetica, Arial, sans-serif }
.seed-csp4 body{
color:#666666;
}
.seed-csp4 h1, .seed-csp4 h2, .seed-csp4 h3, .seed-csp4 h4, .seed-csp4 h5, .seed-csp4 h6{
color:#444444;
}
.seed-csp4 a, .seed-csp4 a:visited, .seed-csp4 a:hover, .seed-csp4 a:active{
color:#27AE60;
}
</style>

「このページとは別のページの例①」

「HTML」
}

<div class="tr1"> <p class="tp">テキスト（transparent指定）</p>

「CSS」
tr1 p{
background-color: #666666;
}

１０月３日、１３時　追記致します。
ご回答ありがとうございます。transparentで透明にする部分は、以下の２枚目の添付画像で水色に反転しているbodyだと思いますが（画像添付の為、body部分を大幅に短縮、新たな疑問が浮かびました。
.seed-csp4 body{
height:100%;
background: ▼transparent;

先ず、１枚目の添付画像の右の表の上から７段目に上記のコードの記述がありましたので（質問文に載せたソースコードにもありました）、２枚目の添付画像の水色に反転したbody自体を透明にしているのだと思いますが、その理解で正解でしょうか？

１枚目の添付画像の右の表の上から６段目に
.seed-csp4 body{
color:■＃666666
と記述があり、＃666666が濃い灰色なので、body全体に一旦濃い灰色を付けて、background: ▼transparent; で透明にして消すという行為自体の意味がわかりません。
body全体に一旦濃い灰色を付けて、後にtransparentで消すなら、最初からbodyに色を付けずに白いままにすればいいと思うのですが如何でしょうか？

m.ts10806

2021/10/02 21:25

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

m.ts10806

2021/10/02 21:27

＞background: transparent」で検索しても Google検索TOP３全てtransparent自体の説明がされた記事でしたが何を観ましたか？リファレンスを見るという手もあります。 https://developer.mozilla.org/ja/docs/Web/CSS/color_value#transparent_keyword

hence

2021/10/03 04:16

皆様、ご回答ありがとうございます。transparentで検索して表示されたサイトを殆ど見ましたが、自ら質問に掲載した以下のコードをよく見ていなかった為、body全体をtransparentで透明にするという命令に気づいていませんでした。大変失礼致しました。 .seed-csp4 body{ height:100%; background: ▼transparent;

hence

2021/10/03 13:02

ご回答ありがとうございます。最初に教えていただいたサイトとリファレンス、マークダウンのcode機能を拝見いたしました。一点だけ疑問があるのですが、質問文のソースコードの中の「background: transparent; ←◆」の行とその上の７行をみると、親要素のhtmlをheight:100%にして且つ背景を#fafafaの極薄の灰色に指定しており、その後から bodyをheight:100%でtransparentの透明の背景をオーバーライドしているのだから、#fafafaの極薄の灰色がキャンセルされて、背景全体がtransparentの透明にならないのでしょうか？あるいは、background: transparent; の指定は、CSS内で一旦指定した親要素の#fafafaの極薄の灰色の背景をキャンセルするものではなく、あくまで#fafafaの極薄の灰色の背景の上に子要素のbodyのtransparentの透明色を被せるのだから、キャンセルされていない親要素の#fafafaの極薄の灰色の背景が透けて見えるとの解釈でよろしいでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

__２枚目の添付画像の水色に反転したbody自体を透明にしているのだと思いますが、その理解で正解でしょうか？ __

いいえ。
背景をbodyなどのルートエレメントに適用した場合、その対象は特例的にカンバス全体です。

The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

Colors and backgrounds

投稿2021/10/04 03:20

編集2021/10/04 03:21