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