背景色を設定するCSSプロパティ

CSS - background-color

background-color の概要

CSSプロパティ「background-color」は、要素の背景色を設定します。背景色を指定するには、RGB値や、CSSで認められている色名を指定するなど、種々の方法があります。

<div class="container">
  <div class="box keyword">色名</div>
  <div class="box rgb-hex">RGA値(16進数)</div>
  <div class="box rgb-hex-short">RGA値(16進数、3桁)</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を表す種々の値を設定できます。

仕様書

関連CSSプロパティ