CSS 可以通过多重背景(Multiple Backgrounds)设置来实现一个含有多层背景的元素效果。多重背景是把一个元素分成多个图层,在不同的背景层设置不同的图像。
如果一个元素有多个背景,那么后面的背景会覆盖前面的背景。多重背景都用逗号隔开。
实现方法如下:
1. 通过background属性设置多个背景
background 属性值可以设置多个背景图像。比如下面的例子:
p { background-image: url(bg.gif), url(bg2.gif); background-repeat: no-repeat; background-position: bottom right, top left; }上述代码中,元素<p>被分成了两个图层,分别使用不同的图像。第一个图层使用 bg.gif 作为背景图像,第二个图层使用 bg2.gif 作为背景图像。 2. 通过background 声明设置多个背景 background 声明的语法如下:
background: bg-image position/bg-size repeat origin clip attachment color;如果我们要使用多个背景,可以在这个声明语句中以逗号分隔,例如:
background: url(bg.gif) top left no-repeat, url(bg2.gif) bottom right no-repeat;上述代码中,元素设置了两个不同的背景图像,其中第一个背景位于元素的左上角,并且在垂直和水平方向上都不进行重复;第二个背景位于元素的右下角同样不重复。<p>标签设置多重背景的效果很让人惊叹,你也可以在自己的 CSS 代码中用到这个技巧,让你的网页更加炫酷。