CSSの背景
CSSの背景プロパティは、要素の背景効果を追加するために使用されます。
これらの章では、次のCSS背景プロパティについて学習します。
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position -
background（略記）
CSS背景色
プロパティは、要素のbackground-color背景色を指定します。
例
ページの背景色は次のように設定されます。
body {
background-color: lightblue;
}
CSSでは、ほとんどの場合、色は次のように指定されます。
- 有効な色名-「赤」など
- HEX値-「＃ff0000」のように
- RGB値-「rgb（255,0,0）」のように
可能な色の値の完全なリストについては、CSSの色の値を参照してください。
その他の要素
任意のHTML要素の背景色を設定できます。
例
ここで、<h1>、<p>、および<div>要素の背景色は異なります。
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
}
不透明度/透明度
プロパティは、要素のopacity不透明度/透明度を指定します。0.0〜1.0の値を取ることができます。値が小さいほど、透明性が高くなります。
不透明度1
不透明度0.6
不透明度0.3
不透明度0.1
例
div {
background-color: green;
opacity: 0.3;
}
注：プロパティを使用してopacity要素の背景に透明度を追加する場合、その子要素はすべて同じ透明度を継承します。これにより、完全に透明な要素内のテキストが読みにくくなる可能性があります。
RGBAを使用した透明度
上記の例のように、子要素に不透明度を適用したくない場合は、RGBAカラー値を使用します。次の例では、テキストではなく背景色の不透明度を設定します。
100％の不透明度
60％の不透明度
30％の不透明度
10％の不透明度
CSSの色の章から、RGBを色の値として使用できることを学びました。RGBに加えて、アルファチャネル（RGB A ）でRGBカラー値を使用できます。これは色の不透明度を指定します。
RGBAカラー値は、rgba（red、green、blue、alpha）で指定されます。alphaパラメータは、0.0（完全に透明）から1.0（完全に不透明）までの数値です。
ヒント： RGBAカラーについて詳しくは、 CSSカラーの章をご覧ください。
例
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}