[CSS] background-color

CSS の background-colorは、 要素に背景色( 単色 又は 透過色 ) を設定するプロパティです。

ショートハンド(一括指定) background も利用できます。

background-color Code DEMO

他の値を持つ場合があります。詳細は以下をご確認下さい

background-colorの詳細

利用できる値

カラーネーム

red,green,

W3Cの仕様により定義されている147色

16進値

#000000,#000,

色を#rrggbb(#6桁) で表す。#rgb(#3桁) の短縮も可

RGB値

rgb(255,255,0)

色を [赤(0~255)], [緑(0~255)], [青(0~255)] で表す

RGB値+透過

rgba(255,255,0,0.5)

RGB値に、透過(0~1)をプラスしたもの

HSL値

hsl(200,20%,50%)

色を [色相(0~360)], [彩度(０～100%)], [輝度(０～100%)] で表す

HSL値+透過

hsla(200,20%,50%,0.5)

HSL値に、透過(0~1)をプラスしたもの

透明 (初期値)

transparent

背景色を透明にする

background-color の複数指定

background-colorは 1つの要素に 1回のみ指定可。複数指定はできません。

background-color 設定時の注意

• background-color: red; の代わりに、
  background: red; と、ショートハンドで記載する事もできます。
• background(ショートハンド) で、背景画像の複数指定をした場合は [ 一番右 (最下層レイヤー)] だけに設定します。

ブラウザ対応状況 (2020/07 現在)

• 〇
• 〇
• 〇
• 〇
• 〇
• 〇
• 〇
• 〇

※より詳細な情報、最新情報、他バージョン対応などを確認されたい場合は Can I use 等のチェックサイトでお調べ下さいm(__)m