CSS之背景

1 background-attachment

background-attachment: scroll | fixed | local

 2 background-repeat

background-repeat: repeat | no-repeat | repeat-x | repeat-y | space | round

 3 多背景图

语法：

E { background-image: value, value; }

示例：

div {
    background-image: url('cat.svg'), url('dog.jpg';
    background-position: 90% 80%, 50% 50%;
    background-repeat: no-repeat;
}

另一种写法：

<pre name="code" class="css">div {
    backgournd:
    url('cat.svg') no-repeat 90% 80%,
    url('dog.jpg') no-repeat 50% 50%;
}

注意：两个背景图层的层叠关系是background-image中先声明的图片在上层，后声明的图片成为上层图片的“背景”。

如果还需声明背景颜色，需要在最后一个“层”中声明，如：

div {
    backgournd:
    url('cat.svg') no-repeat 90% 80%,
    url('dog.jpg') no-repeat 50% 50% #d5d5d5;
}

4 background-size

语法：

E { background-size: value; }

E {background-size: width height;}

示例：

div {background-size: 100px 100px;}

如果使用百分比，则计算的基准是容器元素，而不是背景图自身。

如果想使图片显示其原本的大小，可以使用auto关键字。

如果只设置一个值，则该值会被认为是对宽度width的设置，而高度height则会被赋予默认值auto，即以下两条规则是等价的：

div {background-size: 100px auto;}
div {background-size: 100px;}

除了可以设置为具体的值外，background-size的属性值还可以是关键字contain和cover。

contain，会使背景图拉伸到不超出容器宽高的大小；

cover，会使背景图拉伸到覆盖容器。

5 background-clip

语法：

E {background-clip: keyword;}        /* keyword: border-box(默认值）, content-box, padding-box */

6 background-origin

语法：

E {background-origin: keyword;}      /* keyword: border-box, content-box, padding-box */

注意：如果background-position为fixed，该属性不生效。

7 新的简写语法：

由于加入新的background属性，在包含这些新属性的background简写语法为：

E {background-image background-repeat background-position / background-size; }

E {background-image background-repeat background-origin background-clip;}