background-clip:要素の背景をどの境界まで表示するか基準を指定する
初期値 | border-box |
適用対象 | 全ての要素、::first-letter および::first-line |
継承 | しない |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
background-clipプロパティの説明
background-clip
は、要素に指定された背景色や背景画像の描画範囲を指定します。初期値では、枠線(ボーダー)の裏側まで描画しますが、余白の縁まで、コンテンツエリアのみ、などに制限することができます。
このプロパティは、background-color
やbackground-image
が指定されていなかった場合、border
関連の値によって境界に不透明な部分が生じている場合に限り視覚効果を発揮します。
backdrop-clipに指定できる値
- border-box
- 背景を要素の縁まで表示します。ただし、
border
関連の値によって枠線が表示されている場合は、その裏に隠れます。これが初期値です。 - padding-box
- 背景を余白の縁まで表示します。枠線の範囲内には背景が描かれません。
- content-box
- 背景をコンテンツが表示される範囲にだけ表示します。余白の範囲内には背景が描かれません。
- text
- 背景をテキストの中に表示します。文字の形に切り取られた背景は、それ以外の場所に表示されません。背景画像をテキストで切り抜く場合は、何らかの理由で画像が表示されなかった時のために代替色を指定しておきましょう。
backdrop-clipの使い方とサンプル
backdrop-clip
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
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
を指定して文字の形に切り抜く場合は、文字色との衝突を避ける必用があります。また、一部のブラウザで機能しない値には、ベンダープレフィックスのプロパティを併記して下さい。
CSS
.samp_box {
padding: 1rem;
background: #ccc;
}
.samp_box > div {
margin-top: 1rem;
padding: 2rem 1rem;
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);
}
HTML
<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>
表示確認
背景画像をテキストで切り抜くと以下のように表示されます。
表示確認
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 | 要素の背後領域にぼかしや色変化などのフィルタ効果を与える |