用css3设置背景渐变之后,还能加背景图片吗

html-css014

用css3设置背景渐变之后,还能加背景图片吗,第1张

可以的,只要把它们用逗号隔开即可,如果你愿意,你甚至可以用多张图片与多个渐变进行复杂的效果叠加。比如下面是两张图片错开位置后放到渐变背景上的例子:

<style>

#ddiv

{

width:480px height:360px

background: url(图片1) no-repeat 30px 20px, url(图片2) no-repeat 160px 180px,-webkit-linear-gradient(top,#966,#8ff)

}

</style>

<div id="ddiv"></div>

要注意的是,在background中排列的多个背景元素(图片或渐变),前面的会覆盖后面的(假如它们位置重合的话)

html里如何给一个div设置多个背景图片,需要用到才CSS3新特性

CSS3 允许您为元素使用多个背景图像。

例如:为id为pic的div 元素设置两幅背景图片:

#pic

{

background-image:url(bg_flower.gif),url(bg_flower_2.gif)

}

上面的例子就是用两种图片为div元素设置背景。

CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制。

background-clip 规定背景的绘制区域。

background-origin 规定背景图片的定位区域。

background-size 规定背景图片的尺寸。