CSS3多重背景

前言

时长有读书的习惯，心痒，手也痒，近日又买了几本，翻看一本《HTML5移动开发》，正心喜，翻看到CSS多重背景，我去，这是个什么属性，看起来和background有点关系，赶紧上Chrome修炼一会百度大法。
呼，我这小心肝，原来是把background属性拆分了用，感觉新世界的大门想我敞开！

正文

background的日常用法

-css-
someelement{
background:#000 url('http://news.xinhuanet.com/fashion/2011-12/12/122410592_111n.jpg') no-repeat center center;
background-size:100% 100%;
}

##多重背景的属性用法

background：

background-color

background-image

background-position

background-repeat

background-attachment

background-origin //css3新增属性

background-clip //css3新增属性

background-size //css3新增属性

殊不知background可以拆解成这些单一属性，有我们经常复合使用的，background-color、background-image、background-position、background-repeat、background-size，对我来说，还有几个生面孔，下面我们逐条分析理解：

background-attachment

这个属性可以控制background是否随滚轴滚动

-css-
someelement{
background-attachment: scroll|fixed|inherit;
}

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

background-origin

background-origin 属性规定 background-position 属性相对于什么位置来定位。

-css-
someelement{
background-origin: padding-box|border-box|content-box;
}

值	描述
border-box	背景图像相对于边框盒来定位。
padding-box	背景图像相对于内边距框来定位。
content-box	背景图像相对于内容框来定位。

background-clip

这个属性可以控制background是否随滚轴滚动

-css-
someelement{
background-clip: border-box|padding-box|content-box;
}

值	描述
padding-box	背景被裁剪到边框盒。
border-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。

多重背景实际应用

someelement{
background:url(demo.gif) no-repeat ,
		   url(demo1.gif) no-repeat left bottom, 
		   url(demo2.gif) no-repeat 10px 15px yellow;
}

以上每个背景图片都是以层的形式显示，第一个在其他之上。
安全的做法是这样子

someelement{
background:url(demo.gif) no-repeat; //这是写给不识别下面这句的默认背景图片

background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px; //这是高级浏览器的css多重背景，第一个最上面

background-color:yellow; //这是定义的默认背景颜色，全部适合

}

兼容低版本IE

.button {
    height: 34px;
    padding: 0 1em 2px;
    border: 0;
    background: url(/study/image/gray_baidu_btn.png) 100% -36px no-repeat;
    background: url(/study/image/gray_baidu_btn.png) no-repeat,
                url(/study/image/gray_baidu_btn.png) 100% -36px no-repeat;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/study/image/gray_baidu_btn.png', sizingMethod='crop');
    font-size: 14px;
    overflow: visible;
    cursor: pointer;
}

需要注意的是filter的是背景是在最上面的。所以你的css书写要有一定的技巧。