WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「背景画像の表示エリア」

background-clip「背景画像の表示エリア」

background-imageで指定した背景画像や、background-colorで指定した背景色を表示する領域を指定します。

CSS Ver.適用要素継承
3.0全てしない
広告

background-clip の指定方法

構文

background-clip : padding-box | border-box | content-box;

プロパティ/設定値意味
background-clip: padding-box; パディングボックスを配置の基準とする
(パディングは含む。ボーダー、マージンは含まない。)
background-clip: border-box; ボーダーボックスを配置の基準とする
(パディング、ボーダーは含む。マージンは含まない。)
background-clip: content-box; コンテンツボックスを配置の基準とする
(パディング、ボーダー、マージンを含まない。)
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

background-clip のサンプル(画像)


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 10px dashed #0000ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  border        : 10px solid #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css-background-img{
  background-image : url(../../../image/bg-img.png);
  background-repeat : repeat;
}
.css-padding-box{
  background-clip : padding-box;
}
.css-border-box{
  background-clip : border-box;
}
.css-content-box{
  background-clip : content-box;
}

<!-- html -->
<div class="common">
  <div class="cssTitle">background-clip : padding-box;</div>
  <div class="css-padding-box css-background-img">
  パディング上から画像を表示<br>
  パディング上から画像を表示
  </div>
  <div class="cssTitle">background-clip : border-box;</div>
  <div class="css-border-box css-background-img">
  ボーダー上から画像を表示<br>
  ボーダー上から画像を表示
  </div>
  <div class="cssTitle">background-clip : content-box;</div>
  <div class="css-content-box css-background-img">
  パディングの内側から画像を表示<br>
  パディングの内側から画像を表示
  </div>
</div>
background-clip : padding-box;
パディング上から画像を表示
パディング上から画像を表示
background-clip : border-box;
ボーダー上から画像を表示
ボーダー上から画像を表示
background-clip : content-box;
パディングの内側から画像を表示
パディングの内側から画像を表示

background-clip のサンプル(背景色)


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 10px dashed #0000ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  border        : 10px solid #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css-background-color{
  background-color : yellow;
}
.css-padding-box{
  background-clip : padding-box;
}
.css-border-box{
  background-clip : border-box;
}
.css-content-box{
  background-clip : content-box;
}

<!-- html -->
<div class="common">
  <div class="cssTitle">background-clip : padding-box;</div>
  <div class="css-padding-box css-background-color">
  パディング上から背景色を表示<br>
  パディング上から背景色を表示
  </div>
  <div class="cssTitle">background-clip : border-box;</div>
  <div class="css-border-box css-background-color">
  ボーダー上から背景色を表示<br>
  ボーダー上から背景色を表示
  </div>
  <div class="cssTitle">background-clip : content-box;</div>
  <div class="css-content-box css-background-color">
  パディングの内側から背景色を表示<br>
  パディングの内側から背景色を表示
  </div>
</div>
background-clip : padding-box;
パディング上から背景色を表示
パディング上から背景色を表示
background-clip : border-box;
ボーダー上から背景色を表示
ボーダー上から背景色を表示
background-clip : content-box;
パディングの内側から背景色を表示
パディングの内側から背景色を表示

広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン