background-clip：要素の背景をどの境界まで表示するか基準を指定する

初期値 border-box
適用対象 全ての要素、::first-letterおよび::first-line
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

background-clipプロパティの説明

CSSのbackground-clipプロパティは、要素に指定された背景色や背景画像の描画範囲を指定します。初期値では、枠線（ボーダー）の裏側まで描画しますが、余白の縁まで、コンテンツエリアのみ、などに制限することができます。

このプロパティは、background-colorやbackground-imageが指定されていなかった場合、border関連の値によって境界に不透明な部分が生じている場合に限り視覚効果を発揮します。

backdrop-clipに指定できる値

border-box
背景を要素の縁まで表示します。ただし、border関連の値によって枠線が表示されている場合は、その裏に隠れます。これが初期値です。
padding-box
背景を余白の縁まで表示します。枠線の範囲内には背景が描かれません。
content-box
背景をコンテンツが表示される範囲にだけ表示します。余白の範囲内には背景が描かれません。
text
背景をテキストの中に表示します。文字の形に切り取られた背景は、それ以外の場所に表示されません。背景画像をテキストで切り抜く場合は、何らかの理由で画像が表示されなかった時のために代替色を指定しておきましょう。

backdrop-clipの使い方とサンプルコード

backdrop-clipプロパティの構文は以下の通りです。

/* キーワード値 */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* グローバル値 */
background-clip: inherit;
background-clip: initial;
background-clip: revert;
background-clip: unset;

backdrop-clipの実例

それでは簡単な例を見てみましょう。textを指定して文字の形に切り抜く場合は、文字色との衝突を避ける必用があります。また、一部のブラウザで機能しない値には、ベンダープレフィックスのプロパティを併記して下さい。

<section class="samp_box">
	<div id="border_box">border-box</div>
	<div id="padding_box">padding-box</div>
	<div id="content_box">content-box</div>
	<div id="text_box">text</div>
</section>
.samp_box {
	padding: 1rem;
	background: #ccc;
}
.samp_box > div {
	margin-top: 1rem;
	padding: 20px;
	border: 10px dashed #000;
	background: #f00;
	font-size: 3rem;
	text-align: center;
}
#border_box {
	background-clip: border-box;
}
#padding_box {
	background-clip: padding-box;
}
#content_box {
	background-clip: content-box;
}
#text_box {
	background-clip: text;
	-webkit-background-clip: text;
	color: rgba(0,0,0,.0);
}

背景画像をテキストで切り抜くと以下のように表示されます。

background-clipに関連するCSSプロパティ

背景（バックグラウンド）
background 背景に関する指定をまとめて行う
background-attachment 背景画像の固定・移動を指定する
background-blend-mode 背景色や背景画像の描画モードを指定する
background-clip 背景の描画範囲を指定する
background-color 背景色を指定する
background-image 背景画像やグラデーションを指定する
background-origin 背景画像を配置する基準点を指定する
background-position 背景画像の表示開始位置を指定する
background-repeat 背景画像の繰り返しを指定する
background-size 背景画像を表示するサイズ（大きさ）を指定する
backdrop-filter 要素の背後領域にぼかしや色変化などのフィルタ効果を与える
© weblan3.com