background-color の概要
CSSプロパティ「background-color」は、要素の背景色を設定します。背景色を指定するには、RGB値や、CSSで認められている色名を指定するなど、種々の方法があります。
<div class="container">
<div class="box keyword">色名</div>
<div class="box rgb-hex">RGA値（１６進数）</div>
<div class="box rgb-hex-short">RGA値（１６進数、３桁）</div>
<div class="box rgb">RGB値</div>
<div class="box rgba">RGBα値</div>
<div class="box hsl">HSL値</div>
<div class="box hsla">HSLα値</div>
</div>
<style>
.container{
background-image:url(https://www-creators.com/wp-content/uploads/2017/10/wall.png);
padding:10px;
}
.box{
font-size:13px;
padding:10px 10px
}
.keyword{
background-color:yellow
}
.rgb-hex{
background-color:#eef8ca
}
.rgb-hex-short{
background-color:#fec
}
.rgb{
background-color:rgb(254, 214, 220);
}
.rgba{
background-color:rgba(254, 214, 220, 0.6);
}
.hsl{
background-color:hsl(90, 79%, 29%)
}
.hsla{
background-color:hsla(90, 79%, 29%, 0.6)
}
</style>background-image との関係
background-color の背景色は、background-image の背後に描画されます。すなわち、背景画像の透明（半透明）な領域には、背景色が見えることになります。
<div class="box"></div>
<style>
.box{
height:300px;
background-repeat:no-repeat;
background-color:#ffdcda;
background-image:url(https://www-creators.com/wp-content/uploads/2017/11/hot.png);
background-position:center;
}
</style>色名
あまり利用する機会は少ないですが、色名はキーワードで指定できます。色名は「CSS Color Module Level 3」に定義されています。
値と解説
Colorを表す種々の値を設定できます。