background-clipプロパティの説明
CSSのbackground-clipプロパティは、要素に指定された背景色や背景画像の描画範囲を指定します。既定値では枠線（ボーダー）の外縁までを対象としますが、この基準を余白の縁まで、コンテンツエリアのみ、文字の形などに変更することができます。
背景色や背景画像は枠線の背後に隠れる形で描画されるため、border-widthを太くしていった場合に、隠れてしまう部分が増えていきます。また、border-styleを変えて破線や点線にした場合、枠線が透明になった部分は背景の色になります。このような状況でデザインに不備が生じた場合に、background-clipの値を調整して解決を試みることが出来ます。
また、背景色や背景画像を文字の形にくり抜いてデザイン的に見せることも可能です。例えば、背景色を指定した親要素の中に、背景写真を指定した子要素を配置し、その背景写真を文字の中にだけ表示することで、凝った見出しやアイキャッチ風のデザインを作成することが可能です。この機能を使いこなせれば、今まで画像編集ソフトを使って個別に用意していた画像を再利用可能な形で置き換えることが出来ます。
background-clipに指定できる値
border-box- 背景を要素の縁まで表示します。ただし、
border関連の値によって枠線が表示されている場合は、その裏に隠れます。これが初期値です。 padding-box- 背景を余白の縁まで表示します。枠線の範囲内には背景が描かれません。
content-box- 背景をコンテンツが表示される範囲にだけ表示します。余白の範囲内には背景が描かれません。
text- 背景をテキストの中に表示します。文字の形に切り取られた背景は、それ以外の場所に表示されません。背景画像をテキストで切り抜く場合は、何らかの理由で画像が表示されなかった時のために代替色を指定しておきましょう。
background-clipの使い方とサンプルコード
background-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;
background-clipの実例
それでは簡単な例を見てみましょう。textを指定して文字の形に切り抜く場合は、文字色との衝突を避ける必用があります。また、一部のブラウザで機能しない値には、ベンダープレフィックスのプロパティを併記して下さい。
<section class="sample-block">
<div class="bc-border">border-box</div>
<div class="bc-padding">padding-box</div>
<div class="bc-content">content-box</div>
<div class="bc-text">text</div>
</section>
.sample-block {
padding: 1rem;
background: #cccccc;
}
.sample-block > div {
margin-top: 1rem;
padding: 20px;
border: 10px dashed #000000;
background-color: #ff0000;
font-size: 3rem;
text-align: center;
}
.bc-border {
background-clip: border-box;
}
.bc-padding {
background-clip: padding-box;
}
.bc-content {
background-clip: content-box;
}
.bc-text {
background-clip: text;
color: rgb(0 0 0 / 0);
}
背景画像を文字の形に切り抜いて表示させる
要素の中に文字が配置されている場合、背景色や背景画像は文字の背面に隠れて見えなくなりますが、これを逆転して文字の形に切り抜いて表示させることが出来ます。
この機能を利用すると、雑誌のアイキャッチなどに見られる表現が、画像編集ソフトを使わずに再現することができます。特に、大きなフォントと写真を組み合わせることで効果が得られます。
<section class="sample-block">
<div class="bc-text">CSSを使って背景画像を文字の形に切り抜くことができます。</div>
</section>
.sample-block {
overflow: auto;
padding: 1rem;
background-color: #0099ff;
text-align: center;
}
.sample-block > div {
margin: 0 auto;
padding: 2rem 1rem;
border: 1px solid #ffffff;
background-image: url(/images/sample_photo_1200x630.jpg);
background-repeat: no-repeat;
background-size: cover;
font-size: 3rem;
font-weight: bold;
}
.bc-text {
background-clip: text;
color: rgb(0 0 0 / 0);
}