CSSのbackgroundプロパティで、背景色を指定するサンプルです。
目次
仕様 | backgroundプロパティの仕様 |
色に透明度を付ける |
background プロパティ
background : 値 background-color : 値 |
backgroundプロパティは、背景色を指定します。
値 | 説明 |
---|---|
色 | 色を指定します。 |
値を継承しない |
- 初期値は透明(transparent)です。
- background-colorでも指定できます。
- 以下はMDNのbackgroundプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/background - 以下はMDNのbackground-colorプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/background-color
backgroundのサンプルです。
<style>
#box1 {
background: LightSkyBlue;
}
#box2 {
background: #00bfff;
}
#box3 {
background: rgb(30, 144, 255);
}
div {
width: 200px;
}
</style>
<div id="box1">background:<br />LightSkyBlue</div>
<div id="box2">background:<br />#00BFFF</div>
<div id="box3">background:<br />rgb(30,144,255)</div>
3行目は、LightSkyBlueという色名を指定しています。
6行目は、#rrggbbの形式で色を指定しています。
9行目は、rgbの形式で色を指定しています。
以下のイメージになります。
色に透明度を付ける
色に透明度を付ける場合は、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);
}
div {
width: 200px;
}
</style>
<div id="box4">background:<br />test1</div>
<div id="box5">background:<br />test2</div>
<div id="box6">background:<br />test3</div>
3,6,9行目は、色の値は同じですが、透明度をそれぞれ0.5,0.3,01としています。
以下のイメージになります。
関連の記事
CSS background-image 背景画像を指定する
CSS background-repeat 背景画像の繰り返しを指定
CSS opacity 透明度を指定するサンプル