備忘録的プログラミングリファレンス

background-clip プロパティ

 background-clip プロパティは、背景の表示範囲を指定する CSS プロパティです。
 指定値には、border まで背景を表示(デフォルト)border-box、paddingまで表示 padding-box、内容部分まで表示 content-box が選択できます。

 background に色や画像を設定しないと background-clip は機能しません。

内容部分まで背景を表示(Exampleを参照
background-clip: content-box;

 指定できる画像は1つ、または複数設定できます。

 背景の範囲は、border や padding の領域も含めた範囲がデフォルトになります。

ページ内 Index

構文(Syntax)

CSS

background-clip: border-box | padding-box | content-box;

DOM ( JavaScript )

値の取得
String=object.style.object.style.backgroundClip
値の設定
object.style.backgroundClip="_value_" 

値(Values)

Value摘要
border-box初期値(default value)。borderの範囲まで背景を表示する。
padding-boxpaddingの範囲まで背景を表示する。
content-boxcontentの範囲まで背景を表示する。
initial初期値に戻す。
inherit親エレメントのプロパティを継承。

備考(Remarks)

初期値(Default value)border-box
継承(Inherited)no
変化(Animatable)no

Example

 background-clipの表示例です。ここではcontent-box値によって内容部分まで背景が表示されます。

 デフォルトではborderまでが背景の表示範囲です。