background-clip:背景の描画領域

概要

“background-clip”プロパティは要素の背景の描画領域を指定するプロパティです。

“background-clip”プロパティはルート要素に適用された場合は無視されます。

サンプルコード

値

背景は境界線の下に描画されるため、境界線に透明な部分がない場合は“padding-box”と“border-box”に視覚的な違いはありません。

複数の背景画像を指定する

“background-image”プロパティで複数の背景画像が指定されている場合、値を“,(カンマ)”で区切って記述することでそれぞれの背景画像の描画領域を指定することができます。値の順番は“background-image”プロパティで指定した値の順番に対応します。

仕様書

background-clip

border-box
padding-box
content-box

ボーダー・ボックスに表示する

div {

padding: 10px;
border: 10px dotted rgb(0,0,0);
background-clip: border-box;

}

パディング・ボックスに表示する

div {

padding: 10px;
border: 10px dotted rgb(0,0,0);
background-clip: padding-box;

}

コンテンツ・ボックスに表示する

div {

padding: 10px;
border: 10px dotted rgb(0,0,0);
background-clip: content-box;

}

複数の背景画像を指定する

div {

padding: 10px;
border: 10px dotted rgb(204,153,204);
background-image: url(sample/background_sample.png), url(background_sample2.png);
background-repeat: repeat-x,repeat-y;
background-clip: border-box,content-box;

}