CSSでの背景プロパティの使い方！背景色を指定する方法
CSSの背景プロパティは、要素の背景効果を追加するために使用されます。
これらの章では、次のCSS背景プロパティについて学習します。
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position -
background(省略形プロパティ)
CSS background-color
background-colorプロパティは、要素の背景色を指定します。
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
注：opacityプロパティを使用して要素の背景に透明度を追加すると、その子要素はすべて同じ透明度を継承します。これにより、完全に透明な要素内のテキストが読みにくくなる可能性があります。
RGBAを使用した透明度
上記の例のように、子要素に不透明度を適用したくない場合は、RGBA色の値。次の例では、テキストではなく背景色の不透明度を設定します。
100%の不透明度
60%の不透明度
不透明度30%
10%の不透明度
CSS Colorの章では、RGBをカラー値として使用できることを学習しました。 RGBに加えて、色の不透明度を指定するアルファチャネル (RGBA)付きのRGBカラー値を 使用する事も出来ます。
RGBAカラー値は次のように指定します。rgba(red, green, blue,alpha）。alphaパラメータは、0.0(完全に透明)から1.0(完全に不透明)までの数値です。
ヒント：RGBAカラーの詳細については、CSS Colorの章を参照してください。
CSS background-colorプロパティ
|
プロパティ |
説明 |
|---|---|
| background-color | 要素の背景色を設定します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。