background-color プロパティ。

background-color プロパティの扱い。

CSS水準

第一水準から

CSS第三水準に於けるモジュール

背景・枠線モジュール

継承の有無

background-color プロパティは、上位要素からは継承されません。

対象セレクタ

対象となるセレクタに制限はありません。

対象メディア

視覚系のメディア全てが対象となります。

background-color プロパティの書式。

background-color プロパティの書式は、以下のようになります。

background-color: 値

値としては、以下のものが取れます。

inherit

一番近い上位要素での色を継承します。

transparent

透明となります。すなわち、上位要素などの背景をそのまま表示します(デフォルト)。

色の値

色の値を指定した場合、その色が適用されます。

background-color プロパティの記述例。

例えば、デフォルトの文字色を黒に、背景色を白にする場合は、

* {
    background-color: #fff;
    color: #000;
    }

と記述します。

background-color プロパティの使用上の注意。

背景色を指定した場合、前景色(文字の色)も適切な色にしないと、可読性を損ねる事があります。

背景色を指定する場合は、必ずcolorプロパティで適切な前景色も指定しましょう。

background-clip プロパティに依る領域指定について。

CSS第三水準(CSS 3)から、background-clip プロパティが導入されましたが、背景色については、背景画像を複数指定している場合には一番最後の画像に与えた background-clip プロパティ値に従います。

例えば、

background-image: url('BG1.GIF'), url('BG2.GIF');
background-color: #efe;
background-clip: border-box, content-box;

となっている場合、背景色は二番目の BG2.GIF に与えた background-clip プロパティ値である content-box 値(要素本体にのみ及ぶ)が適用されます。

• 背景画像を一枚しか指定していない場合は、当然その画像に与えた background-clip プロパティの値に従います。

背景画像を用いずに background-clip プロパティで背景色の領域指定をしたい場合は、background-image プロパティに単一の none 値を指定し(デフォルトなので指定しなくても良いが)、一枚目の画像に対して background-clip プロパティ を適用します。

例えば、

background-image: none;
background-color: #efe;
background-clip: content-box;

とする事で、背景色を要素本体にだけ及ぶように出来ます。

また、画像と無関係に background-clip プロパティで背景色の領域指定をしたい場合は、background-image プロパティでの背景画像指定の一番最後に none 値を指定し、その一番最後の画像に対して background-clip プロパティ を適用します。

例えば、

background-image: url('BG1.GIF'), url('BG2.GIF'), none;
background-color: #efe;
background-clip: border-box, border-box, content-box;

とする事で、一番最後の背景画像と無関係に背景色の範囲を決められるようになります。