CSS の背景プロパティは、要素の背景効果を定義するために使用されます。
これらの章では、次の CSS 背景プロパティについて学習します。
background-color 属性は、要素の背景色を指定します。
ページの背景色は次のように設定されます。
body {
background-color: lightblue;
}
CSS では、通常、色は次のように指定されます。
任意の HTML 要素の背景色を設定できます。
ここでは、<h1>、<p>、<div> 要素の背景色が異なります。
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
opacity 属性は、要素の不透明度/透明度を指定します。 値の範囲は 0.0 ～ 1.0 です。 値が低いほど、透明度が高くなります:
div {
background-color: green;
opacity: 0.3;
}
注: opacity 属性を使用して要素の背景に透明度を追加する場合、そのすべての子要素は同じ透明度を継承します。 これにより、完全に透明な要素内のテキストが読みにくくなる可能性があります。
上記の例のように、子要素に不透明度を適用したくない場合は、RGBA カラー値を使用します。 次の例では、テキストの不透明度の代わりに背景色を設定します。
CSS カラー の章で、RGB を次のように使用できることを学びました。色の値。 RGB に加えて、アルファ チャネル (RGBA) で RGB カラー値を使用することもできます。このチャネルは色の不透明度を指定します。
RGBA カラー値は次のように指定されます: rgba(red, green, blue, alpha) 。 alpha パラメータは、0.0 (完全に透明) から 1.0 (完全に不透明) までの数値です。
div {
background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}