TECH I.S.

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 色の章{.underline]、RGB をカラー値として使用できること。 RGB に加えて、RGB カラー値をアルファチャネル (RGB) - 色の不透明度を指定します。

RGBA カラー値は次のように指定します: rgba(red, green, blue,*アルファ*)。の*アルファ*パラメータは、0.0 (完全に透明) から 1.0 (完全に不透明) までの数値です。

ヒント:RGBA カラーの詳細については、CSS 色の章.

div {   background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */ }

自分で試してみる »


CSS 背景色プロパティ

財産

説明

background-color 要素の背景色を設定します


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細