背景に関するプロパティの中に、背景の適用範囲を指定する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~背景に関するショートハンドプロパティ
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
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であることが原因です。
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プロパティで指定した各領域の左上の境界となっています。
INTERNOUS,inc. All rights reserved.