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

background-clipプロパティ

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

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

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

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

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

関連プロパティ

 以下は関連するプロパティです。

プロパティ名概要
backgroundバックグランドプロパティの一括指定
background-attachmentスクロールによるバックグランドの表示位置
background-blend-mode複数の背景画像や配色を混ぜ合わせる
background-colorCSSのColorの指定
background-image画像の挿入
background-origin繰り返し表示を開始する位置
background-position画像の配置位置
background-repeat画像の繰り返し(デフォルトは繰り返し)
background-size画像のサイズ
linear-gradient()線形グラデーション
radial-gradient()円形グラデーション

構文(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までが背景の表示範囲です。