このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

background-clip:背景の描画領域CSS3で追加

記事Feb. 13th,2021
背景の描画領域を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 background-clip: border-box;
適用対象 すべての要素
継承 しない
パーセント値 パーセント値は指定できません
計算値 指定したキーワードをアイテムとするリスト
アニメーション 繰り返し可能なリスト

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

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

サンプルコード

div { background-clip: content-box;}

説明
<box>”値
padding-box 背景はパディング・ボックスに表示されます
border-box 背景はボーダー・ボックスに表示されます
content-box 背景はコンテント・ボックスに表示されます
他の値
共通キーワード

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

CSSのボックスモデル

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

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

div {
background-image: 〚一番手前の背景画像〛,〚手前から2番目の背景画像〛,〚手前から3番目の背景画像〛,...,〚一番奥の背景画像〛;
background-clip: 〚一番手前の背景画像の設定〛,〚手前から2番目の背景画像の設定〛,〚手前から3番目の背景画像の設定〛,...,〚一番奥の背景画像の設定〛;
}

仕様書

Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
background-clip
定義なし

定義なし

定義あり
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
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;
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク