no-image

背景

background/背景複数指定

背景の複数指定等。

結果

をベースに、星の透明画像の背景複数指定をしています。
スタイルシートによる
複数画像指定。テスト。
スタイルシートによる
複数画像指定。テスト。
スタイルシートによる
複数画像指定。テスト。
スタイルシートによる
複数画像指定。テスト。
スタイルシートによる
複数画像指定。テスト。
スタイルシートによる
複数画像指定。テスト。

解説

backgroundは、背景の画像や色、背景の配置などを指定できます。
従来のCSSでもこれはできましたが、CSS3では、複数の指定を行えます。
間違いやすい点は、上に置きたい画像は手前に書くことです。

background-clip/線と背景の関係

ボーダーと背景の関係。

結果

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

解説

background-clipは、背景とボーダーの関係を指定できます。
指定できる3つの値があります。
「border-box」は、デフォルト。
「padding-box」 は、パディングを含めて背景を適用する。
「content-box」は、パディングが係っているところまで背景を適用する。

background-origin/背景の開始位置

背景の開始位置

結果

background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

解説

background-originは、ボーダー、パディングに対する開始位置です。
指定できる3つの値があります。
「border-box」は、デフォルト。
「padding-box」 は、パディングを含めて背景を開始する。
「content-box」は、パディングが係っているところから背景を開始する。

background-size/背景のサイズ

背景のサイズ

結果

background-size:contain;
background-size:cover;
background-size:20px 20px;

解説

background-sizeは、背景の大きさを指定できます。
「auto」は、デフォルト。
「contain」は、縦幅または横幅の最大に合わせた値。
「cover」は、縦幅または横幅の最小に合わせた値。
他にも、「px」、「%」等の指定が可能です。