CSS background 背景色を指定するサンプル

nas

CSSのbackgroundプロパティで、背景色を指定するサンプルです。

目次

仕様 backgroundプロパティの仕様
サンプル backgroundのサンプル
  色に透明度を付ける

background プロパティ

background : 値
background-color : 値

backgroundプロパティは、背景色を指定します。

値 説明
色 色を指定します。
値を継承しない

backgroundのサンプル

backgroundのサンプルです。
背景色を指定します。

<style>
#box1{
	background:LightSkyBlue;
}
#box2{
	background:#00BFFF;
}
#box3{
	background:rgb(30,144,255);
}
#d1 div{width:200px;height:100px;border:1px solid #000;}
</style>
<body >
<div id="d1">
<div id="box1">background:<br />LightSkyBlue</div>
<div id="box2">background:<br />#00BFFF</div>
<div id="box3">background:<br />rgb(30,144,255)</div>
</div>
</body>

3行目は、LightSkyBlueという色名を指定しています。
6行目は、#rrggbbの形式で色を指定しています。
9行目は、rgbの形式で色を指定しています。

以下のイメージになります。

background:
LightSkyBlue
background:
#00BFFF
background:
rgb(30,144,255)

色に透明度を付ける

色に透明度を付ける場合は、rgbaを指定して4つめの引数を追加します。
4つめの引数は、0から1までを指定でき、0が透明で1が不透明です。

<style>
#box4{
	background:rgba(205,92,92,0.5);
}
#box5{
	background:rgba(205,92,92,0.3);
}
#box6{
	background:rgba(205,92,92,0.1);
}
#d2 div{width:200px;height:100px;border:1px solid #000;}
</style>
<body >
<div id="d2">
<div id="box4">background:<br />test1</div>
<div id="box5">background:<br />test2</div>
<div id="box6">background:<br />test3</div>
</div>
</body>

3,6,9行目は、色の値は同じですが、透明度をそれぞれ0.5,0.3,01としています。

以下のイメージになります。

background:
test1
background:
test2
background:
test3

関連の記事

CSS background-image 背景画像を指定する
CSS background-repeat 背景画像の繰り返しを指定
CSS opacity 透明度を指定するサンプル

△上に戻る