background-clipの使い方[HTML&CSS]

background-clipの使い方

background-clipは、背景の適用範囲を決める際に使われます。

background-clipプロパティの値の設定方法

border-box	背景がborderまで広がるよう指定
padding-box	背景がpaddingまで広がるよう指定
content-box	背景がコンテンツボックス内に収まるよう指定
text	背景がテキスト部分にのみ切り取ったように指定

表だけではわかりづらいと思うので、使用例や画像を使いながら解説したいと思います。

border-box

border-boxは、背景がborderまで広がるよう指定する値です。

HTML:

<div class="box">テキストテキスト</div>

CSS:

.box {
  width: 500px;
  height: 200px;
  margin: 50px auto;
  font-size: 3em;
  font-weight: bold;
  border: 20px dotted #333;
  padding: 50px;
  background-image: url("../hiyoko.jpg");
  background-size: cover;
  background-clip: border-box;
}

ブラウザでの表示:

このように、borderの下まで背景画像が広がっています。

padding-box

padding-boxは、背景がpaddingまで広がるよう指定する値です。

HTML:

<div class="box">テキストテキスト</div>

CSS:

.box {
  width: 500px;
  height: 200px;
  margin: 50px auto;
  font-size: 3em;
  font-weight: bold;
  border: 20px dotted #333;
  padding: 50px;
  background-image: url("../hiyoko.jpg");
  background-size: cover;
  background-clip: padding-box;
}

ブラウザでの表示:

このように、背景はpaddingまで広がっています。

content-box

content-boxは、背景がコンテンツボックス内に収まるよう指定する値です。

HTML:

<div class="box">テキストテキスト</div>

CSS:

.box {
  width: 500px;
  height: 200px;
  margin: 50px auto;
  font-size: 3em;
  font-weight: bold;
  border: 20px dotted #333;
  padding: 50px;
  background-image: url("../hiyoko.jpg");
  background-size: cover;
  background-clip: content-box;
}

ブラウザでの表示:

このように、背景がpaddingより内のコンテンツボックス内に広がるよう指定しています。

text

textは、背景がテキスト部分にのみ切り取ったように指定する値です。

HTML:

<div class="box">テキストテキスト</div>

CSS:

.box {
  width: 500px;
  height: 200px;
  margin: 50px auto;
  font-size: 3em;
  font-weight: bold;
  border: 20px dotted #333;
  padding: 50px;
  background-image: url("../hiyoko.jpg");
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(51, 51, 51, 0.1);
}

ブラウザでの表示:

textを使用する際には、テキストのcolorを透明にしないと適用されないため、

colorをrgbaで設定するようにしましょう。

また、『-webkit-background-clip: text;』と指定したのは、

Google Chromeのブラウザにbackground-clipを機能させるためです。

※『-webkit-』などの接頭辞を、ベンダープレフィックスと言います。

詳しくは、以下の記事をご覧ください。

[CSS]ベンダープレフィックスとは[-webkit-など]

まとめ

・border-boxは、背景がborderまで広がるよう指定する値

・padding-boxは、背景がpaddingまで広がるよう指定する値

・content-boxは、背景がコンテンツボックス内に収まるよう指定する値

・textは、背景がテキスト部分にのみ切り取ったように指定する値

それでは、最後まで読んでいただきありがとうございました。