Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

CSS3新要素 | 背景・ボーダー | background_clip

概要

css3の背景の適用範囲を指定するbackground_clipについて説明します

プロパティ名

background_clip

内容

背景の適用範囲を指定します

設定値

設定値名 設定値内容
border-box ボーダーボックス
padding-box パディング
content-box コンテント

サンプル

<!DOCTYPE HTML>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>background_clip</title>
    <style type="text/css">
    p {
      border-style:dashed;
      border-width:10px;
      border-color:#000;
      width:300px;
      height:100px;
      padding:10px;
    }
    p#contents1 {
      background-image:url("background_clip.png");
      background-clip:border-box;
    }
    p#contents2 {
      background-image:url("background_clip.png");
      background-clip:padding-box;
    }
    p#contents3 {
      background-image:url("background_clip.png");
      background-clip:content-box;
    }
    </style>
  </head>
  <body>
    <p id="contents1">border-box</p>
    <p id="contents2">padding-box</p>
    <p id="contents3">content-box</p>
    <hr />
    以下、背景画像
    <img src="background_clip.png" alt="" width="" height="" />
  </body>
</html>

画面のキャプチャ