CSS

【background-clip】背景の表示領域

みいと

background-clipで背景の表示領域を設定する

background-clipプロパティを使用すると、背景の表示領域を設定することができます。
値には下記のキーワードを指定できます。

  • border-box
  • padding-box
  • content-box

border-box

background-clipプロパティにborder-boxを指定するとボーダー、パディング、要素内容に背景を表示します。
background-clipプロパティはborder-boxが初期値に設定されています。

border-boxを指定すると、このようにボーダー部分にも背景色や背景画像が表示されます。

border-boxの例

padding-box

background-clipプロパティにpadding-boxを指定するとパディング、要素内容に背景を表示します。

padding-boxを指定すると、このようにボーダー以外の部分に背景色や背景画像が表示されます。

padding-boxの例

content-box

background-clipプロパティにcontent-boxを指定すると要素内容だけに背景を表示します。

content-boxを指定すると、このように要素内容だけに背景色や背景画像が表示されます。

content-boxの例

注意点

html要素の背景は特殊な扱いをされるようで、ブラウザなどの表示領域全体が背景の適用対象になります。

試しに下記のようにhtml要素にパディングを設定して、background-clipプロパティをcontent-boxにしましたが、ブラウザ全体に背景色がついてしまいました。

html {
    background-color: skyblue;
    padding: 100px;
    background-clip: content-box;
}

ただし、画像のサイズや位置を指定した場合は、html要素のボックスを基準に表示されるようです。

html要素の背景は、ブラウザなどの表示領域全体が適用対象になるので注意。

背景の表示領域のまとめ

まとめ

  • background-clipプロパティは背景の表示領域を設定できる
  • 値にはborder-box、padding-box、content-boxが指定できる
  • html要素の背景は、ブラウザなどの表示領域全体が適用対象になる

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました