用CSS3设置多个背景、背景渐变、指定背景大小
CSS3规范中定义的背景属性有:
下面我们以5个例子来说明一些新的CSS3的功能。其中,CSS3允许设置多个背景图片,每个背景图片占一层,层的上下按照在CSS中写的顺序来定,最先写的背景在最上层。
background:url(../img1.jpg) 0 0 no-repeat,
url(../img2.jpg) 200px 0 no-repeat,
url(../img3.jpg) 400px 201px no-repeat;
是背景的简写方式,除了默认值之外,等效于下面的写法:
background-image:url("../img1.jpg"),url("../img2.jpg"),url("../img3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 0 0, 200px 0, 400px 201px;
另外一个需要注意的是:背景渐渐也是一个背景层:
background-image:url("../img1.jpg"),
-moz-linear-gradient(left, rgba(0, 255, 0, 1), rgba(255, 0, 0, 0));
就看不出渐变效果了。