プロパティ background-clip

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

特徴

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

ブラウザサポート

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

構文

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

値

値	説明
`border-box`	背景は境界線の外側の端まで広がります（境界線の下）。
`padding-box`	背景は境界線の内側の端でトリミングされます（`border` の下には入りません）。
`content-box`	背景は内容の上にのみ表示されます（`padding` でトリミングされます）。
`text`	背景はテキストに沿ってトリミングされます。

デフォルト値: border-box。

例 . border-box の値

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

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

#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 の値

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

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

#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 上に広がりません：

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

#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 が必要です）：

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

#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;
}