CSSのbackground-clipで背景の描画範囲を制御し、デザインを調整する方法をわかりやすく解説

2024.09.14
スポンサーリンク

background-clipプロパティは、背景画像や背景色の描画範囲を指定するために使用されます。このプロパティを使うことで、背景がどの領域に表示されるかをコントロールできます。

スポンサーリンク

background-clipの値とその効果の一覧

  • border-box: 背景はボーダー領域まで表示されます。
  • padding-box: 背景はパディング領域まで表示され、ボーダーには表示されません。
  • content-box: 背景はコンテンツ領域にのみ表示されます。
  • text: 背景がテキストの文字自体にクリップされます（WebKitベースのブラウザで有効）。

注意点と関連情報

background-clipは、要素の背景画像や背景色がどこまで表示されるかを制御します。textを使用する際は、WebKitベースのブラウザでサポートされていますが、色は透明に設定する必要があります。

background-clipプロパティが効かない時の原因と対策

背景色や背景画像が指定されていない

background-clipプロパティは、背景色や背景画像が適用されている場合に効果を発揮します。背景が設定されていない要素に使用しても、効果は見られません。
対策: background-colorやbackground-imageで背景を指定しているか確認し、背景が適用されている状態でbackground-clipを使用しましょう。

共通するCSSコード

.css-sample-container {
  width: 300px;
  height: 200px;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: white;
  border: 10px solid black;
}

.css-sample-box {
  width: 100%;
  height: 100%;
  background-image: url('https://programming-cafe.com/wp-content/uploads/colorphoto03.jpg');
  background-size: cover;
}

background-clip: border-box

背景がボーダー領域まで表示される例です。

HTMLコード

<div class="css-sample-container clip-border-box">
  <div class="css-sample-box">border-box</div>
</div>

CSSコード

.clip-border-box .css-sample-box {
  background-clip: border-box;
}

表示結果

border-box

background-clip: padding-box

背景がパディング領域まで表示され、ボーダーには表示されません。

HTMLコード

<div class="css-sample-container clip-padding-box">
  <div class="css-sample-box">padding-box</div>
</div>

CSSコード

.clip-padding-box .css-sample-box {
  background-clip: padding-box;
}

表示結果

padding-box

background-clip: content-box

背景がコンテンツ領域にのみ表示される例です。

HTMLコード

<div class="css-sample-container clip-content-box">
  <div class="css-sample-box">content-box</div>
</div>

CSSコード

.clip-content-box .css-sample-box {
  background-clip: content-box;
}

表示結果

content-box

background-clip: text

背景がテキストにクリップされる例です。この値はWebKitベースのブラウザでサポートされています。

HTMLコード

<div class="css-sample-container clip-text">
  <div class="css-sample-box">text</div>
</div>

CSSコード

.clip-text .css-sample-box {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

表示結果

text

まとめ

  • background-clipは、背景画像や背景色の描画範囲を制御するために使用されます。
  • デフォルトでは、背景はborder-boxまで表示されますが、他の値を使用することで、パディング領域やコンテンツ領域のみに制限することができます。
  • textは、背景をテキストにクリップする特殊な値で、主にWebKitベースのブラウザでサポートされています。
スポンサーリンク