CSS3 背景介绍_html/css_WEB-ITnose

Background は CSS で頻繁に使用される属性である必要があり、シンプルで実用的です。しかしパラメータが多すぎるので、この記事では背景のさまざまな特徴を紹介します。

CSS3 より前には、主に 5 つの属性がありました:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

CSS3 では、次の 3 つの属性が追加されました。

背景 - 原点

• background-clip
• background-size

background-color

: 背景色、デフォルト値は透明で、これ以上の詳細はありません。

background-image

: 背景画像、デフォルト値はなしです。 url を使用して画像アドレスを指定できます。これは相対アドレスまたは絶対アドレスにすることができるため、詳細は説明しません。

background-repeat

: no-repeat、repeat-x、repeat-y、repeat。デフォルト値は繰り返しです。 CSS3 では、スペースとラウンドという 2 つの値が追加されます。最初の 4 つの効果を下の図に示します。左の図の繰り返しなしは背景画像の元のサイズで、次に水平繰り返し、垂直繰り返し、全方向繰り返しが続きます。注意すべき詳細が 2 つあります:

背景画像は、コンテンツ領域の左上隅ではなく、ボックス モデルのパディング ボックスの左上隅から始まります。パディングを設定すると、パディング領域も背景画像で覆われます。

1. 繰り返しは順方向と逆方向の両方で行われます。たとえば、repeat-x は右に繰り返すという明らかな効果がありますが、よく見ると左にも繰り返すことがわかります (左の境界線の下にも絵があります)。誤解しないでください。それは右方向にのみ繰り返されるということです。同様に、repeat-y も上方向に繰り返します (上の境界線の下にも画像があります)。同様に、repeat は全周繰り返しです

CSS3 では、それぞれ水平方向と垂直方向の繰り返しを表す 2 つの値を設定できます。たとえば、background-repeat:repeatrepeat;はbackground-repeat:repeat;と同等です。水平または垂直に繰り返すには、すでにrepeat-xまたはrepeat-yがあり、それらは完全に矛盾しているようです。2つの値を許可することに何の意味がありますか?この関数は、以下の CSS3 の 2 つの新しい値 (スペース、ラウンド) と組み合わせる必要があります。単一の値のみを許可すると、水平/垂直の一方向スペースまたはラウンド効果を実現できません。

スペースとは、両端をタイル状に並べて背景画像の元のサイズを維持することを意味します。丸めるとは両端を揃えることを意味し、背景画像が適切に引き伸ばされます。たとえば、左側の図では、background-repeat: space no-repeat; 水平方向の端はタイル状に表示され、垂直方向の端は繰り返されません。右側の図は、background-repeat:round no-repeat の両端を水平に揃え、垂直に繰り返しません。左の図がわかりやすいので詳細は省略します。右の図では、round no-repeat とrepeat-x は同様の効果があるように見えますが、よく見ると実際には違いがあります。Round は画像を引き伸ばして両端の位置を揃えますが、repeat-x は単に単純です。背景画像の元のサイズを維持しながら繰り返します。

単一の値を使用する場合、それは水平方向と垂直方向の両方で繰り返されます。たとえば、左の図では、background-repeat: space; となります。右の画像背景-繰り返し: ラウンド;。

background-attachment

: スクロール (デフォルト)、修正されました。背景画像がページとともにスクロールするか、固定されているかを示します。通常、fixed は html または body で使用されます。

background-position

: 背景画像の水平方向と垂直方向の開始点。デフォルト値は 0% 0% で、開始点がパディング ボックスの左上隅にあることを意味します。パーセンテージまたはピクセル値を設定できます。正の値は順方向にシフトします (左上隅を開始点として、右下に行くのが順方向、左上に行くのが逆方向です)。たとえば、左側の画像には、background-position: -10px 10px があり、右側の画像には、background-position: 10px -10px があります (デモンストレーションのために、どちらも no-repeat に設定されています)。 50% はキーワード センターで置き換えることができます。

この属性は CSS3 で強化され、2 つの値が 4 つの値 (background-position: left 10px top 10px; など) に拡張され、最初の 2 つは水平方向を表し、最後の 2 つは水平方向を表します。垂直方向を表します。これにより、背景画像の開始点が左上隅に限定されなくなり、背景画像の位置をより柔軟に制御できるようになります。

background-position: left 10px top 10px;background-position: left 10px bottom 10px;background-position: right 10px top 10px;background-position: right 10px bottom 10px;

上記の 5 つの属性は CSS1 で定義されており、CSS3 は適切に拡張されただけです。以下は、CSS3 の新しいプロパティの紹介です。

background-origin

: content-box、padding-box (デフォルト)、border-box。このプロパティは、背景画像の原点がボックス モデル内のどこにあるかを決定します。 padding-box のデフォルト値は、背景画像の原点が content+padding 領域にあることを示します。同様に、content-box は、背景画像の原点がコンテンツ領域にあることを意味します。 border-box は、背景画像の原点が content+padding+border 領域にあることを意味します。左の図のコンテンツ ボックス (div には 5 ピクセルのパディングがあります)、中央の図のパディング ボックス、および下の図のボーダー ボックス (背景画像の原点が外側にあることがわかります)境界線の子午線、背景画像部分は境界線の下まで続きます)

background-clip

: content-box、padding-box、border-box (デフォルト)。背景のクリッピング領域。 W3Cの簡単な説明と例を読んだ後、この属性は上記のbackground-originと非常に似ており、違いを理解するのが非常に難しいことがわかりました。実際には違いがあります。 background-origin は背景画像の原点を決定するもので、background-clip は背景クリッピング領域を指します。前者のオブジェクトは背景画像であり、後者のオブジェクトは背景全体です。 2 つの違いは次のとおりです。

/* 左图 */background: red url(bg50.png) no-repeat;background-origin: content-box;/* 右图 */background: red url(bg50.png) no-repeat;background-clip: content-box;

同样设成了content-box。左图background-origin将背景图片的原点设为content区域左上角。右图background-clip设为content-box的意思是：将content区域外的所有背景相关内容（包括背景色和超出部分的背景图片）剪裁掉。

在上面代码的基础上，将左图background-origin和右图background-clip都改成content-box

左图background-origin将背景图片的原点设为padding-box区域左上角。右图background-clip设为padding-box的意思是：将padding-box区域外的所有背景相关内容剪裁掉，看效果只剪裁掉了border下面的背景色，而背景图片没有被剪裁。道理很简单，因为背景图片默认的background-origin就是padding-box，因此没有超出padding-box区域的部分。

在上面代码的基础上，将左图background-origin和右图background-clip都改成border-box

原理和上面都一样，不再赘述。

background-size：px值，%百分比，cover，contain，auto（默认值）。在CSS2.1之前，我们是没有办法控制背景图片的大小的。CSS3可以用该属性来控制背景图片的大小。例如background-size: 10px 20px;第一个是width，第二个是height，如果只设一个值，第二个值将成为auto（意思是保持原始宽高比例）。

关键字cover将按比例缩放图片来填充满整个背景区域。contain将保持原图比例的前提下，缩放图片来填充背景区域。左图background-size: cover;，右图background-size: contain;

原图是150*200px，cover通过缩放会完全充满背景区域，但可能会出现图片扭曲或截断，因此多用在背景图片比容器小的情况下。contain会保证原图比例的前提下尽量填满背景区域，但可能出现没完全填满的情况，因此多用在背景图片比容器大的情况下。

小Tips：嫌cover，contain自适应缩放不居中的话，可以加上background-position: center;

至此background的各属性介绍完毕。我们可以单独指定background各属性，也可以将原始的5个属性合并到一起指定，CSS3新增的3个属性请单独指定。

未指定的属性将被浏览器自动设为默认值。如background: red;等价于background: red none repeat repeat scroll 0% 0%;。CSS3新增的3个属性也会被设为默认值：padding-box border-box auto

下面介绍下CSS3多背景属性

CSS3之前每个容器只能指定一张背景图片，要实现多个背景图片的效果，需要HTML端多个容器叠加，比较麻烦。CSS3开始可以直接在一个容器上指定多张图片。

指定多张图片时，只有background-color属性是无法指定多个的，因为该属性是隶属于容器而非背景图片的。你可以单独为多张图片指定background属性，也可以合并在一起指定。

单独为多张图片指定background属性格式：

background-image: url(bg.png), url(bg50.png), url(bgheader.jpg);background-repeat: repeat-x, repeat-y, no-repeat;background-attachment: scroll, scroll, scroll;background-position: center, right 10px bottom 10px, left top; background-origin: content-box, padding-box, border-box;background-clip: border-box, padding-box, content-box;background-size: auto, 50% auto, 50% 50%;

各属性第一个逗号是图1，各属性第二个逗号是图2，各属性最后一个值是图3。上面代码最终效果是图4。从图中也可以看出层叠关系，第一个逗号的图1在最上层，依次往下是第二个逗号的图2和最后一个值的图3。当然最底层肯定是容器的background-color。

你也可以将各属性合并在一起写，中间仍旧用逗号隔开，效果和上图4是一样的：

background: url(bg.png) repeat-x scroll center,            url(bg50.png) repeat-y scroll right 10px bottom 10px,            url(bgheader.jpg) no-repeat scroll left top;background-origin: content-box, padding-box, border-box;background-clip: border-box, padding-box, content-box;background-size: auto, 50% auto, 50% 50%;

不论你单独写还是合并写，最后加一个background-color属性（如果容器需要背景色）。

总结

background应该算CSS里一个比较基础的属性，本篇更多的是给自己零散的知识点做一个总结。以后对background有什么新的发现都可以往这篇里增加，这就像一颗种子，假以时日终会长成一颗小树苗。