【15-4】background関連のプロパティ（4/4 clip と origin）

前回に引き続き backgroundについて。
今回は background-clip と background-origin について詳しく見てみましょう。

本日のINDEX

1. clip は範囲、origin は基点
2. background-clipプロパティ
   1. 画像を複数使った場合の background-clip の指定は？
3. background-originプロパティ
   1. 画像を複数使った場合の background-origin の指定は？
4. background-size: cover との関係

backgroundについての記事は5回に分けています。

【15-1】background関連のプロパティ（1/4）

backgroundのプロパティと値の一覧／background-color／background-image／background-repeat／background-attachment

【15-2】background関連のプロパティ（2/4 background-position）

background-position

【15-3】background関連のプロパティ（3/4 background-size）

background-size

【15-4】background関連のプロパティ（4/4 clip と origin）　←今ココ

background-clip／background-origin

【15-5】backgroundのショートハンド まとめ

たくさんあるbackgroundのプロパティを一括でまとめられます

clip は範囲、origin は基点

background-clip と background-origin の値は同じで「border-box」「padding-box」「content-box」という3つのキーワードだけです。
では、background-clip と background-origin の違いはなんでしょう？

background-clipは、色も画像も どこまで塗る（貼る）かの 範囲 を決めます。

デフォルトはborder-box。要素のボーダーの範囲まで背景が塗られます。
padding-boxで、要素のpaddingの範囲まで背景が塗られます。
content-boxでは、背景は要素のコンテンツの範囲まで狭められます。

background-originは、画像をどこから始めるかの 基点 を決めます。

border-boxは、要素のボーダーの境界が画像を貼付ける基点になります。
デフォルトはpadding-boxで、要素のpaddingの境界が基点になります。
content-boxでは、背景は要素のコンテンツの境界が基点になって画像が貼付けられます。

さて、ざっと概要がわかったところで、いつものようにサンプルで確認してみよう。

background-clipプロパティ

background-clipは、色も画像も、どこまで塗る（貼る）かの 範囲 を決めます。

この background-clipは、ほかの background 関連のプロパティと違って、唯一 背景色にも効くんです。範囲なので。他のは色は関係ないけど。これ重要。

背景色（background-color）だけのサンプルです。色をつける範囲を変えられますね。

border-box（デフォ）

padding-box

content-box

background-clipの値は3つのキーワードだけです。

background-clip の値
border-box	デフォルト値。ボーダーの範囲まで背景が塗られます。
padding-box	paddingの範囲まで。
content-box	コンテントの範囲まで。

値の継承	なし	適用できる要素	全部

次に background-clip の画像を使ったサンプルを見てみましょう。
画像の場合は「background-origin」の値も関わり合ってくるので、ちっと複雑ですが、じっくり見てください。

サンプルの画像2つは、上の画像は no-repeat、下は repeat にしています。

↓この最初のサンプルは、border-box のはずなのに 上になってる画像（赤い花）の表示は padding-box ですね。これは background-originのデフォルト値が絡んでいます。詳しくはこちら。

border-box（デフォ）

padding-box

content-box

上のサンプルの HTMLはこちら。

<div id="smp2">
  <p>border-box</p>
  <p>padding-box</p>
  <p>content-box</p>
</div>

CSSはこちら。

div#smp2 {margin:0; padding:0;}
div#smp2 p {
    border:10px dashed rgba(0,0,0,0.2); /*ボーダーの指定*/
	padding:10px;  /*パディングの指定*/
	background-color:#ddd;
	background-image:url(images/bg05.jpg),url(images/bg04.gif); /*2つの画像*/
	background-repeat:no-repeat,repeat} /*上の画像はno-repeat、下はrepeatに*/
div#smp2 p:nth-child(1) {background-clip:border-box;}
div#smp2 p:nth-child(2) {background-clip:padding-box;}
div#smp2 p:nth-child(3) {background-clip:content-box;}

一番最初のサンプルについて
下の画像（repeatしているグリッド画像）はボーダーの背景にも貼られていますが、赤い花の画像はpaddingから貼られていますね。
これは background-origin（画像を置く基点）のデフォルトが padding-box だからです。
下のグリッド画像も background-origin は同じく padding-box なのですが、リピートされているので、上側や左側のボーダーの下にも画像があるんです。

3番目のサンプルをよく見ると、赤い花の画像の左と上部が少しトリミングされています。
これも background-origin のデフォルトが padding-box だから起きている現象です。
画像が貼られる基点は padding の左上の角ですが、表示の範囲は content 部分なので、左と上が欠けているんですね。

ちなみに、ここで「p:nth-child(1)」というセレクタを使っていますが、これは「2番目のp要素」をセレクタにする という意味の擬似クラスです。 詳しくは【3】id とか classって何？（セレクタの「種類」を知っておこう）をご覧ください。

画像を複数使った場合の background-clip の指定は？

画像を複数使った場合の background-clipの指定は、それぞれの画像のサイズをカンマで区切って指定することができます。
順序はbackground-imageで指定したのと同じで、上になっている画像から指定します。

ただし、background-clipは、ほかの background関連のプロパティと違って 背景色にも効くので「背景色の指定をどうするか」がポイントですね。

背景色は、一番最後の画像の background-clip の指定と一緒になります。
背景色だけは個別に指定できないんですね。画像は1つずつバラバラに指定できるけど。

サンプルです。
画像はすべて no-repeat、画像を置く基点（background-origin）は border-box にしています。

padding-box, border-box

content-box, padding-box

border-box, content-box

サンプルのCSSです（HTMLは最初のサンプルと同じ構成です）

div#smp2_1 {margin:0; padding:0;}
div#smp2_1 p {
	border:10px dashed rgba(0,0,0,0.2);
	padding:10px;
	background-color:#ddd;
    background-origin:border-box;
	background-image:url(images/bg05.jpg),url(images/bg04.gif);
	background-repeat:no-repeat;}  /*画像は両方ともno-repeatにしています*/
div#smp2_1 p:nth-child(1) {background-clip:padding-box,border-box}
div#smp2_1 p:nth-child(2) {background-clip:content-box,padding-box}
div#smp2_1 p:nth-child(3) {background-clip:border-box,content-box}

background-originプロパティ

background-originは、画像をどこから始めるかの 基点 を決めます。
値は、background-clipと同じ3つのキーワードだけです。

background-origin の値
border-box	ボーダーの境界が基点になります。
padding-box	デフォルト値。paddingの境界が基点になります。
content-box	コンテントの境界が基点になります。

値の継承	なし	適用できる要素	全部

background-origin のサンプルです。
画像は2つ指定して、上の画像は no-repeat、下は repeat に指定しています。
リピートしている画像も、基点が微妙に変わっているのがわかります。

border-box

padding-box（デフォ）

content-box

上のサンプルの HTMLはこちら。

<div id="smp3">
  <p>border-box</p>
  <p>padding-box</p>
  <p>content-box</p>
</div>

CSSはこちら。

div#smp3 {margin:0; padding:0;}
div#smp3 p {
    border:10px dashed rgba(0,0,0,0.2);  /*ボーダーの指定*/
	padding:10px;  /*パディングの指定*/
	background-color:#ddd;
	background-image:url(images/bg05.jpg),url(images/bg04.gif); /*2つの画像*/
	background-repeat:no-repeat,repeat;} /*上の画像はno-repeat、下はrepeatに*/
div#smp3 p:nth-child(1) {background-origin:border-box;}
div#smp3 p:nth-child(2) {background-origin:padding-box;}
div#smp3 p:nth-child(3) {background-origin:content-box;}

画像を複数使った場合の background-origin の指定は？

background-originは 値を「,（カンマ）」で区切って複数の画像を別々に指定することができます。

サンプルで見てみましょう。画像は両方ともno-repeatにしています。

padding-box,border-box

content-box,padding-box

border-box,content-box

サンプルのCSSです（HTMLはさきほどのサンプルと同じ構成です）

div#smp3_1 {margin:0; padding:0;}
div#smp3_1 p {
	border:10px dashed rgba(0,0,0,0.2);
	padding:10px;
	background-color:#ddd;
	background-image:url(images/bg05.jpg),url(images/bg04.gif);
	background-repeat:no-repeat;}  /*画像は両方ともno-repeatにしています*/
div#smp3_1 p:nth-child(1) {background-origin:padding-box,border-box;}
div#smp3_1 p:nth-child(2) {background-origin:content-box,padding-box;}
div#smp3_1 p:nth-child(3) {background-origin:border-box,content-box;}

background-size: cover との関係

最後に、ちょっと気になっていることをメモっておきます。
background-size: cover と background-origin の組み合わせると、
cover して余ったほう（下のサンプルでは画像の左右）が、そのまま padding や border の背景に表示されてしまうんです。上下は background-origin の指定どおりになるのにね。
これは background-clip がデフォルトの border-box だから...？　じゃあなんで上下は効いてるんだろう。

background-origin: border-box
これはまとも

background-origin: padding-box
左右がはみ出てる

background-origin: content-box
左右がはみ出てる

background-size:cover と background-origin を同時に指定する時は、 background-originと同じ値のbackground-clipも指定する必要があるようです。これでうまくいきます。

-origin も -clip も border-box

-origin も -clip も padding-box

-origin も -clip も content-box

上のサンプルのCSSです（HTMLは今までのサンプルと同じ構成です）

div#smp4 {margin:0; padding:0;}
div#smp4 p {
	border:10px dashed rgba(0,0,0,0.2);
	padding:10px;
	background-color:#ddd;
	background-image:url(images/bg05.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover}
div#smp4 p:nth-child(1) {background-origin:border-box; background-clip:border-box}
div#smp4 p:nth-child(2) {background-origin:padding-box; background-clip:padding-box}
div#smp4 p:nth-child(3) {background-origin:content-box; background-clip:content-box}

次回予告

次回は、これまで見てきた background関連のプロパティを一括でまとめるショートハンドプロパティ「background」について。
画像が複数でも、グラデーションと画像の組み合わせでも、全部一本にまとめることができます。