background-clip - 背景の範囲を指定する

投稿日: / 更新日:

スタイルシートのbackground-clipは、背景が及ぶ範囲を指定するプロパティです。

サンプルコード

下記は、背景の範囲を枠線(border)にまで適用しないように指定したサンプルコードです。

div {
	background-clip: padding-box ;
}

デモ

スタイルシートのbackground-clipを指定した例です。通常、背景は枠線(border)まで及びます。下の要素が通常のもので、枠線にまで背景色が及んでいます。本来は透過のあるグレーの枠線が背景色の茶色と重なって色が変わって見えていますよね。対して上の要素は、枠線にまでは背景が及ばない指定にしたため、色がはっきりと表示されています。

値の指定

値の指定方法は主に下記の通りです。リンクをクリックすると、デモを確認できます。

項目説明
inherit親要素の値を引き継ぐ。例の場合、div要素のbackground-clipは、bodyに指定された値(padding-box)が引き継がれる。
initialプロパティの初期値が適用される。この場合、border-box(枠線まで背景が及ぶ)となる。
border-box初期値。枠線まで、背景が及ぶ。
padding-box要素の枠内余白(padding)まで背景が及ぶ。枠線(border)には及ばない。
content-box要素の純粋なコンテンツ部分まで、背景が及ぶ。枠内余白(padding)、枠線(border)には及ばない。例では、24pxに指定した余白部分に背景色が及んでいないことを確認して下さい。
textSafariでのみ、ベンダープレフィクスを付けることでtextの値を指定可能でした。が、私の環境では、もうこの値は働きませんでした。文字部分にまで背景が及ぶようです。

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。

  • Chrome

    ●

    -

    時期不明

  • Firefox

    ●

    -

    時期不明

  • Safari

    ●

    -

    時期不明

  • Ie

    ●

    -

    時期不明

  • Edge

    ●

    -

    時期不明

  • Opera

    ●

    -

    時期不明

  • Safari(iOS)

    ●

    -

    時期不明

  • Ie Mobile

    ●

    -

    時期不明

  • Chrome

    ●

    -

    時期不明

  • Android

    ●

    -

    時期不明

  • FF Mobile

    ●

    -

    時期不明

  • Opera Mobile

    ●

    -

    時期不明