Title

background-clipとは

background clip とは次の2つの語句からなるCSSプロパティの名前です。

background

読み: バックグラウンド
意味: 背景、景色

clip

読み: クリップ
意味: 留め金、紙どめ

目次に戻る

background-clipプロパティの概要

このプロパティは要素の背景領域を表示する範囲を数個のパターンの中から指定するためのプロパティです。

clipは紙などをまとめたり、挟んで固定しておくための金具ですが、ここでのクリップも似たような意味で 捉えると分かりやすくなります。

背景を壁紙と考えて、その壁紙をクリップで留めておくためのプロパティだと覚えておけば良いのではないでしょうか。

目次に戻る

実機サンプルとサンプルコード

このプロパティは背景の領域や背景に使用される画像が、要素のどの領域まで拡張されるかを指定できます。 このページのサンプルでは表示領域の拡張の違いを分かりやすくするために境界線を太い点線で表示しています。

div{border: 20px dashed #888;}

構文

セレクター{background-clip: 設定値;}

初期値: border-box;

初期値のborder-boxは境界線の領域まで、背景領域の表示を拡張します。 つまり、境界線と背景が重なって表示されている状態となります。

div{
	background-clip: border-box;
}

目次に戻る

背景をpadding領域まで拡張する: padding-box

境界線であるborderの直ぐ内側の領域をpaddingと言います。これは要素の内側の余白ということになります。 このpadding-box値を指定すると境界線の内側の縁の部分まで背景領域が拡張されます。

div{
	background-clip: padding-box;
}

目次に戻る

背景をcontent領域まで拡張する: content-box

要素の内側の余白領域をpaddingと言います。 このcontent-box値を指定するとpadding領域の内側の縁の部分まで背景領域が拡張されます。

このサンプルではborderだけではなく、padding領域も20ピクセルに設定しています。

div{
	padding: 20px;
	background-clip: content-box;
}

目次に戻る

背景をtext領域まで拡張する: text

このtext値を指定するとテキスト領域の部分まで背景領域が拡張されます。 この機能はブラウザの機能対応が異なるため、webkitを使うことが推奨されます。

div{
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

目次に戻る

グローバルキーワード

background-clipプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のborder-boxに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

div{background-clip: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

background-clip: border-box;

background-clip: padding-box;

background-clip: content-box;

background-clip: text; -webkit-background-clip: text; color: transparent;

目次に戻る