前言
时长有读书的习惯,心痒,手也痒,近日又买了几本,翻看一本《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书写要有一定的技巧。