プロパティ background-clip

プロパティ background-clip は、 背景の塗りつぶしまたは背景画像が要素に対して どのように配置されるかを定義します：境界線の下、 padding の内側のみ、または内容の上のみ。

特徴

• border-box を透明な境界線と共に使用すると、背景がその下に見えます
• 値 text は完全なサポートのためにベンダープレフィックスを必要とします
• プロパティはグラデーションと複数の背景で動作します
• border-radius では、背景は丸められた角に合わせてトリミングされます

ブラウザサポート

すべてのモダンブラウザは border-box、padding-box、content-box をサポートしています。 値 text はプレフィックス -webkit- を必要とし、Chrome、Safari、Edge でサポートされています。

構文

cssセレクター {
  background-clip: border-box | padding-box | content-box | text;
}

値

デフォルト値: border-box。

例 . border-box の値

背景が半透明の境界線の下に入ります：

html<div id="elem"></div>

css#elem {
  background-clip: border-box;
  background-color: #ffd6d6;
  background-repeat: no-repeat;
  border: 10px dashed rgba(0,0,0,0.3);
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

例 . padding-box の値

背景は境界線の下に入りません：

html<div id="elem"></div>

css#elem {
  background-clip: padding-box;
  background-color: #ffd6d6;
  background-repeat: no-repeat;
  border: 10px dashed rgba(0,0,0,0.5);
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

例 . content-box の値

背景は padding 上に広がりません：

html<div id="elem">
  text text text text text
  text text text text text
  text text text text text
</div>

css#elem {
  background-clip: content-box;
  background-color: #ffd6d6;
  background-repeat: no-repeat;
  border: 10px dashed rgba(0,0,0,0.3);
  padding: 30px;
  width: 250px;
  height: 150px;
}

Результат:

例 . text の値

背景がテキストに沿ってトリミングされます（値 transparent での -webkit-text-fill-color が必要です）：

html<div id="elem">text text text</div>

css#elem {
  display: inline-block;
  background: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  font-size: 40px;
  font-weight: bold;
}

Результат:

関連項目