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;}