CSSでの背景プロパティの使い方!背景色を指定する方法
CSS の背景プロパティは、要素の背景効果を追加するために使用されます。
これらの章では、次の CSS 背景プロパティについて学習します。
-
background-color
-
background-image
-
background-repeat
-
background-attachment
-
background-position
-
background
(速記プロパティ)
CSS 背景色
のbackground-color
プロパティは、要素の背景色を指定します。
CSS では、ほとんどの場合、色は次のように指定されます。
- 有効な色の名前 - 「赤」など
- HEX 値 - 「#ff0000」など
- RGB 値 - 「rgb(255,0,0)」など
見るCSS カラー値可能なカラー値の完全なリストについては、
その他の要素
HTML 要素の背景色を設定できます。
例
ここでは、<h1>、<p>、および <div> 要素の背景色が異なります。
不透明度/透明度
のopacity
プロパティは、要素の不透明度/透明度を指定します。 0.0 ~ 1.0 の値を取ることができます。値が低いほど透明になります。
不透明度1
不透明度 0.6
不透明度 0.3
不透明度 0.1
ノート:を使用する場合opacity
プロパティを使用して要素の背景に透明度を追加すると、その子要素はすべて同じ透明度を継承します。これにより、完全に透明な要素内のテキストが読みにくくなる可能性があります。
RGBA を使用した透明度
上記の例のように、子要素に不透明度を適用したくない場合は、RGBA色の値。次の例では、テキストではなく背景色の不透明度を設定します。
100% の不透明度
60% の不透明度
不透明度 30%
10% の不透明度
あなたは私たちから学びましたCSS 色の章{.underline]、RGB をカラー値として使用できること。 RGB に加えて、RGB カラー値をアルファチャネル (RGBあ) - 色の不透明度を指定します。
RGBA カラー値は次のように指定します: rgba(red, green, blue,*アルファ*)。の*アルファ*パラメータは、0.0 (完全に透明) から 1.0 (完全に不透明) までの数値です。
ヒント:RGBA カラーの詳細については、CSS 色の章.
CSS 背景色プロパティ
財産 |
説明 |
---|---|
background-color | 要素の背景色を設定します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。