关于CSS设置背景图的问题个人整理

本文主要是关于CSS设置背景图的问题

首先看一下在CSS2中关于背景图的设置：

background-color:颜色单词 | RGB的色值 | RGBA的色值;
background-image:url(图像地址);
background-repeat:repeat | repeat-x | repeat-y | no-repeat;
background-attachment:scroll | fixed;
background-position:宽高值 | 宽高百分比;

在具体使用过程中，为了清晰表示，将background各个属性单独列出来表示，当然合在一起书写也是可以的。

在CSS3中，添加了一些属性，也增强了一些属性，具体如下：

background-image:url(图像地址);
background-position:宽高值 | 宽高百分比;
background-size:宽高值 | 宽高百分比;
background-repeat:repeat | repeat-x | repeat-y | no-repeat;
background-attachment:scroll | fixed;
background-clip:padding-box | border-box | content-box;
background-color:颜色单词 | RGB的色值 | RGBA的色值;

以上属性，有的是CSS3中新增的，有的是在CSS3中得到了增强。

具体的语法结构如下：

background:background-image | background-position/background-size | background-repeat | background-attachment | background-clip | background-origin | background-color

说明：当采用合并写法的时候，background-size属性需要跟在background-position后面，两者之间需要用‘/’分开，考虑到当前浏览器存在的兼容问题，推荐分开书写，因为为了兼容，可能需要添加浏览器内核前缀，例如：

-ms-background-origin

设置多个背景图片

上面介绍了background的一些属性，下面介绍如何给一个元素设置多个背景图片。

在CSS3中，不需要使用其他任何属性就可以给一个元素设置除了background-color以外其他多个背景属性。也就是说，除了背景色以外，其他任何属性都可以设置多个，具体写法如下：

合并写法：

background:[background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin] 

分开写法：

background-image:url1,url2,url3...;
background-repeat:repeat1,repeat2,repeat3...;
background-position:position1,position2,position3...;
background-size:size1,size2,size3...;
background-attachment:attachment1,attachment2,attachment3...;
background-clip:clip1,clip2,clip3...;
background-origin:origin1,origin2,origin3...;
background-color:color;