背景画像の表示方法(クリップ方法)を指定する

書式

background-clip : 表示方法;
background-clip : 背景画像1の表示方法, 背景画像2の表示方法,...;

説明

背景画像の表示方法(クリップ方法)を指定するにはbackground-clipを使います。background-clipには3つの方法を指定できます。
border-boxを指定すると枠までが背景で埋め尽くされます。
padding-boxを指定すると枠を除いた内側が背景で埋め尽くされます。
content-boxを指定すると枠とパディング領域を除く部分が背景で埋め尽くされます。
background-clipはベンダープレフィックスは不要です。

サンプル サンプルを実行 サンプルをダウンロード

p {
width: 400px;
height:200px;
border:20px solid rgba(255,0,0,0.25);
padding: 10px;
background-image: url(sunflower.jpg);
}
#type1 { background-clip: border-box; }
#type2 { background-clip: padding-box; }
#type3 { background-clip: content-box; }
目次に戻る