本文主要是关于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;