CSS - background-clip

トップ > CSSリファレンス > background-clip

概要

属性名 background-clip
<box>[, <box>]*
値の詳細 <box> = border-box | padding-box | content-box
初期値border-box
適用可能要素すべての要素
継承継承しない
メディアvisual
アニメーション不可

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS39.03.6(制限有)
4.0
3.0(制限有)
15
10.5(制限有)
11.5
3.1(制限有)
7

説明

背景画像を表示する領域を指定します。

説明
border-boxボーダーの外側まで表示します。
padding-boxパディングの外側(ボーダーの内側)まで表示します。
content-boxコンテンツの外側(パディングの内側)まで表示します。

使用例

CSS
.test {
  width: 100px;
  height: 50px;
  margin: 0em 1em 1em 1em;
  border: 10px dashed #333333;
  border: 10px solid rgba(20, 20, 20, 0.4);
  background-image: url(../image/back.gif);
  padding: 10px;
}
.test-border-box {
  background-clip: border-box;
}
.test-padding-box {
  background-clip: padding-box;
}
.test-content-box {
  background-clip: content-box;
}
HTML
<h5>border-box</h5>
<div class="test test-border-box">こんにちわ</div>
<h5>padding-box</h5>
<div class="test test-padding-box">こんにちわ</div>
<h5>content-box</h5>
<div class="test test-content-box">こんにちわ</div>
表示
border-box
こんにちわ
padding-box
こんにちわ
content-box
こんにちわ

関連項目

background, background-color, background-image, background-repeat, background-attachment, background-position, background-clip, background-origin, background-size

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年11月29日
http://www.tohoho-web.com/css/prop/background-clip.htm