background-clipプロパティーによる背景の塗りつぶし範囲の変更 - CSS

CSSのbackground-imageで設定した背景の塗りつぶし範囲を変更するコードを紹介します。

概要

CSSのbackground-clipプロパティーを変更すると、背景の塗りつぶし範囲を変更できます。

書式

background-clip:[設定];

設定には以下の値を指定できます。

値	動作
border-box	背景を境界の外側の辺まで拡張します (但し、境界の下に重ね合わせられます)。
padding-box	背景をパディングの外側の辺まで拡張します。境界の下には背景が描かれません。
content-box	背景をコンテンツボックスの中に (切り取って) 表示します。

実装例

コード

以下のHTMLファイルとCSSファイルを作成します。

BackgroundImageClip.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="BackgroundImageClip.css" />
</head>
<body>
  <h1>background-clip のデモ</h1>

  <div class="Frame1">
    枠1です。
  </div>

</body>
</html>

BackgroundImageClip.css

.Frame1 {
  height: 18rem;
  border: dotted 24px #808080;
  background-clip: border-box;
  background-image: url('back.png');
}

実行結果

background-clip を記述しない場合

背景画像は点線の下にも描画されます。background-clip: border-box;と同じ表示です。

background-clip: border-box の場合

背景画像は点線の下にも描画されます。

background-clip: padding-box の場合

背景画像は点線の下には描画されません。

padding-boxとcontent-boxの違いを確認するため、Paddingの値を増やします。
paddingの値を以下に設定します。

.Frame1 {
  height: 18rem;
  padding: 1rem 1rem 1rem 2rem;
  border: dotted 24px #808080;
  background-clip: padding-box;
  background-image: url('back.png');
}

paddingを設定した場合には下図の表示となります。paddingの余白部分にも背景画像が表示されます。

background-clip: content-box の場合

背景画像は点線の下には描画されません。

padding-boxとcontent-boxの違いを確認するため、Paddingの値を増やします。
paddingの値を以下に設定します。

.Frame1 {
  height: 18rem;
  padding: 1rem 1rem 1rem 2rem;
  border: dotted 24px #808080;
  background-clip: padding-box;
  background-image: url('back.png');
}

paddingを設定した場合には下図の表示となります。paddingの余白部分には背景画像は表示されません。