html背景两个图片背景,一个DIV设置两张或多张背景图

自从有了CSS3之后，要想在同一个DIV里面设置多张图片，实在是一件很简单的事情，下面就为大家介绍这个。

一、css3设置多张背景图片

可以如下写：

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

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

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

也可以这么写：

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

background-repeat: no-repeat, no-repeat, no-repeat;

background-position: 0 0, 200px 0, 400px 201px;

二、CSS3设置颜色渐变的背景

①水平渐变

{background-image:linear-gradient(left, red 100px, yellow 200px);}

②左上角渐变

那从(100px, 100px)到(200px, 200px)应该就是从左上角开始，写法如下：

{background-image:linear-gradient(left top, red 100px, yellow 200px);}

知识拓展：

CSS3/CSS1 background-image 属性

语法:

background-image： [ , ]*

= none | | | | |

默认值：none

取值：

none：无背景图。

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

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

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

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

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

说明：

设置或检索对象的背景图像。

如果设置了background-image，同时也建议作者设置background-color用于当背景图像不可见时保持与文本一定的对比。

对应的脚本特性为backgroundImage。