css3实现一个div设置多张背景图片及background-image属性实例演示

css3实现一个实现一个div设置多张背景图片及设置多张背景图片及background-image属属

性实例演示性实例演示

主要介绍了css3实现一个div设置多张背景图片及background-image属性,同时对于css3背景渐变也做了详细的

解释,水平渐变,左上角渐变等等方式,需要的朋友可以参考下

引子引子

以前做网页布局的时候，一个div只能设置一张背景图片，设置多个背景的话，要用多个div嵌套才能实现，这样兼容性比较

好。若您的网站要求兼容浏览器低版本，建议用这种方法。css3的出现，解决了一个div只能设置一个背景的问题，使一个div

可以设置多个背景图片。background-image还可以设置线性渐变，等效果。

<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

默认值：none

取值：取值：

none：无背景图。

< url >：使用绝对或相对地址指定背景图像。

< linear-gradient>：使用线性渐变创建背景图像。（CSS3）

< radial-gradient>：使用径向(放射性)渐变创建背景图像。（CSS3）

< repeating-linear-gradient>：使用重复的线性渐变创建背景图像。（CSS3）

< repeating-radial-gradient>：使用重复的径向(放射性)渐变创建背景图像。（CSS3）

说明说明：

gradient >作为背景图像。

Opera11.50-11.51不支持CSS3新增参数值：< radial-gradient > |< repeating-radial-gradient >作为背景图像。

写法：写法：

css3设置多张背景图片设置多张背景图片

css3设置多张背景图片，可以如下写：

background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,

url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,

url("haorooms.jpg") 400px 201px no-repeat;

也可以这么写：

background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");