CSS【 background】6 ~ background-clip、background-origin

Plantation Green Environment Conservation Frame Concept

背景に関するプロパティの中に、背景の適用範囲を指定するbackground-clipプロパティと、背景の基準位置を指定するbackground-originプロパティがあります。
今回は、このbackground-clipプロパティとbackground-originプロパティについてまとめたいと思います。

背景に関するプロパティについては、以下のページもご参照下さい。
CSS【 background】1 ~ 背景プロパティの種類とbackground-color
CSS【 background】2 ~ background-imageでレイヤーやグラデーションも
CSS【 background】3 ~ background-repeat、background-attachment
CSS【 background】4 ~ background-position
CSS【 background】5 ~ background-size
CSS【 background】6 ~ background-clip、background-origin(本ページ)
CSS【 background】7 ~ 背景に関するショートハンドプロパティ

目次

1.background-clipプロパティ
2.background-originプロパティ

1.background-clipプロパティ

background-clipプロパティは、背景の適用範囲を指定する際に使用するプロパティです。

background-clipプロパティで指定する値は、次の通りです。

border-box デフォルト値
ボーダー領域に背景を表示する
padding-box パディング領域に背景を表示する
content-box コンテント領域に背景を表示する

background-clipプロパティの値は、継承されません。
また、background-clipプロパティは、全ての要素で使用できます。

background-clipプロパティとbackground-originプロパティの値は、同じで、上記の3つのキーワードです。

background-originプロパティが、背景をどの領域から表示させるかという基準位置を指定するプロパティであるのに対して、background-clipプロパティは、背景をどの領域まで表示させるかという、範囲を指定するプロパティです。

background-clipプロパティに、border-box、padding-box、content-boxをそれぞれ指定してみます。

border-box(デフォルト)

padding-box

content-box

 
ソースは次の通りです。

(CSS)
div#sample {margin:0; padding:0;}
div#sample p {
width:300px;
height:180px;
border:10px dashed rgba(210,60,240,1);
padding:10px;
font-weight:bold;
color:white;
background-color:#F9C;
background-image:url(img/terrace.jpg);
background-repeat:no-repeat;}
div#sample p:nth-child(1) {background-clip:border-box;}
div#sample p:nth-child(2) {background-clip:padding-box;}
div#sample p:nth-child(3) {background-clip:content-box;}

(HTML)
<div id=”sample”>
<p>border-box(デフォルト)</p>
<p>padding-box</p>
<p>content-box;/p>
</div>

border-boxを指定した一番上の表示について、背景色(#F9C:ピンク)はボーダーの背景にも表示されていますが、画像はpadding領域から表示されています。
これは、background-origin(画像を表示する基準位置)のデフォルト値がpadding-boxであることが原因です。

▲目次へ戻る

2.background-originプロパティ

background-originは、画像をどこから表示させるかという基準位置を指定する際に使用するプロパティです。

background-originプロパティで指定する値は、background-clipプロパティと同じで、次の通りです。

border-box ボーダーの境界が基準位置となる
padding-box デフォルト値
パディングの境界が基準位置となる
content-box コンテントの境界が基準位置となる

background-originプロパティの値は、継承されません。
また、background-originプロパティは、全ての要素で使用できます。

background-clipプロパティが、背景をどの領域まで表示させるかという範囲を指定するプロパティであるのに対して、background-originプロパティは、背景をどの領域から表示させるかという基準位置を指定するプロパティです。

background-originプロパティに、border-box、padding-box、content-boxをそれぞれ指定してみます。

border-box

padding-box(デフォルト)

content-box

 
ソースは次の通りです。

(CSS)
div#sample {margin:0; padding:0;}
div#sample p {
width:300px;
height:180px;
border:10px dashed rgba(210,60,240,1);
padding:10px;
font-weight:bold;
color:white;
background-color:#F9C;
background-image:url(img/terrace.jpg);
background-repeat:no-repeat;}
div#sample p:nth-child(1) {background-origin:border-box;}
div#sample p:nth-child(2) {background-origin:padding-box;}
div#sample p:nth-child(3) {background-origin:content-box;}

(HTML)
<div id=”sample”>
<p>border-box</p>
<p>padding-box(デフォルト)</p>
<p>content-box;/p>
</div>

基準位置(画像の左上の位置)が、background-originプロパティで指定した各領域の左上の境界となっています。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です