cman.jp > WEBページ作成TOP > CSSリファレンス > 「背景画像の表示エリア」
WEBページ作成
広告
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; | コンテンツボックスを配置の基準とする （パディング、ボーダー、マージンを含まない。） |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
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;
パディングの内側から背景色を表示
パディングの内側から背景色を表示
パディングの内側から背景色を表示
| 関連するCSS(STYLE) | |
|---|---|
| background | 背景全般の設定 |
| background-attachment | 背景画像のスクロール |
| background-blend-mode | 背景をブレンド |
| background-color | 背景色の設定 |
| background-image | 背景画像の設定 |
| background-origin | 背景画像の表示位置の基点 |
| background-position | 背景画像の表示位置の設定 |
| background-repeat | 背景画像の繰返し設定 |
| background-size | 背景画像の表示サイズ設定 |
| clip-path | 画像の切り抜き |
広告