background-clip

background-clipは、背景画像を表示する範囲を指定するスタイルです。

解説

背景画像の表示範囲を指定します。
同時に背景画像の指定（background-image）の指定が必要です。

構文

構文は以下になります。

値

background-clipには以下の値が指定できます。

サンプル

背景画像をパディング領域と、ボーダー領域に表示する

.sample01{
  width:300px;
  height:200px;
  padding:20px;
  border:1px solid rgba(200, 200, 200, 0.5);
  background-image:url('sample.jpg');
  background-clip:border-box;
}

<div class="sample01"></div>

ボーダー領域（灰色）と、パディング領域にも背景画像が表示されています。

背景画像をパディング領域には表示し、ボーダー領域には表示しない

.sample02{
  width:300px;
  height:200px;
  padding:20px;
  border:1px solid rgba(200, 200, 200, 0.5);
  background-image:url('sample.jpg');
  background-clip:padding-box;
}

<div class="sample02"></div>

ボーダー領域（灰色）には背景画像が表示されていません。

背景画像をパディング領域とボーダー領域には表示しない

.sample03{
  width:300px;
  height:200px;
  padding:20px;
  border:1px solid rgba(200, 200, 200, 0.5);
  background-image:url('sample.jpg');
  background-clip:content-box;
}

<div class="sample03"></div>

ボーダー領域（灰色）と、パディング領域には背景画像が表示されていません。

備考

• 背景画像をパディング領域、ボーダー領域にも表示する場合は、background-clipの指定を省略しても構いません。

関連項目

• background：背景に関するスタイルをまとめて指定する
• background-color：背景色を指定する
• background-image：背景に画像を指定する
• background-repeat：背景画像の表示方法を指定する
• background-position：背景画像の位置を指定する
• background-attachment：背景画像のスクロール方法を指定する
• background-clip：背景画像を表示する範囲を指定する
• background-size：背景画像のサイズを指定する

Tweet