background-clip プロパティ
background-clip プロパティは、背景の表示範囲を指定する CSS プロパティです。
指定値には、border まで背景を表示(デフォルト)border-box
、paddingまで表示 padding-box
、内容部分まで表示 content-box
が選択できます。
background に色や画像を設定しないと background-clip は機能しません。
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-box | paddingの範囲まで背景を表示する。 |
content-box | contentの範囲まで背景を表示する。 |
initial | 初期値に戻す。 |
inherit | 親エレメントのプロパティを継承。 |
備考(Remarks)
初期値(Default value) | border-box |
継承(Inherited) | no |
変化(Animatable) | no |
Example
background-clipの表示例です。ここではcontent-box値によって内容部分まで背景が表示されます。
デフォルトではborderまでが背景の表示範囲です。
関連プロパティ
以下は関連するプロパティです。
プロパティ名 | 概要 |
---|---|
background | バックグランドプロパティの一括指定 |
background-attachment | スクロールによるバックグランドの表示位置 |
background-blend-mode | 複数の背景画像や配色を混ぜ合わせる |
background-color | CSSのColorの指定 |
background-image | 画像の挿入 |
background-origin | 繰り返し表示を開始する位置 |
background-position | 画像の配置位置 |
background-repeat | 画像の繰り返し(デフォルトは繰り返し) |
background-size | 画像のサイズ |
linear-gradient() | 線形グラデーション |
radial-gradient() | 円形グラデーション |