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);
}
背景画像をテキストで切り抜くと以下のように表示されます。