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

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

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

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

border-box

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

padding-box

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

content-box

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

注意点

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

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

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

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

背景の表示領域のまとめ

みいと

TwitterContact

興味を持ったものをいろいろと勉強しています。