ITコラム

Plantation Green Environment Conservation Frame Concept

ITコラム

2017.04.25

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

背景に関するプロパティの中に、背景の適用範囲を指定する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プロパティで指定した各領域の左上の境界となっています。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.