css3多背景支持
基于很多人从百度搜索这篇文章进来后无所获,本人决定重新编辑一下这篇文章,使其更加的具有可读性和可参考性。
css3多重背景依然是不支持IE9以下系列版本。其他高级浏览器都是支持的。
css3多重背景属性
background: background-color background-image background-position background-repeat background-attachment background-origin //css3新增属性 background-clip //css3新增属性 background-size //css3新增属性
background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释:如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。
默认值: | padding-box |
---|---|
继承性: | no |
版本: | CSS3 |
javascript 语法: | object.style.backgroundOrigin="content-box" |
语法
//code from http://caibaojian.com/css3-multiple-background.html background-origin: padding-box|border-box|content-box;
值 | 描述 | 测试 |
---|---|---|
padding-box | 背景图像相对于内边距框来定位。 | 测试 |
border-box | 背景图像相对于边框盒来定位。 | 测试 |
content-box | 背景图像相对于内容框来定位。 | 测试 |
background-clip 属性规定背景的绘制区域。
默认值: | border-box |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.backgroundClip="content-box" |
语法
background-clip: border-box|padding-box|content-box;
值 | 描述 | 测试 |
---|---|---|
border-box | 背景被裁剪到边框盒。 | 测试 |
padding-box | 背景被裁剪到内边距框。 | 测试 |
content-box | 背景被裁剪到内容框。 | 测试 |
background-size 属性规定背景图像的尺寸。
默认值: | auto |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.backgroundSize="60px 80px" |
语法
background-size: length|percentage|cover|contain;
值 | 描述 | 测试 |
---|---|---|
length | 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。 | 测试 |
percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。 | 测试 |
cover | 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 | 测试 |
contain | 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 | 测试 |
对于目前来说,有一些浏览器(Safari 5, Firefox 4, Chrome 10)中不识别origin
和clip
,所以我们用基本的写法就可以了。
css3的多背景写法
p{background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px yellow;}
以上每个背景图片都是以层的形式显示,第一个在其他之上。
安全的做法是这样子
p{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书写要有一定的技巧。请参考演示
希望我的这篇文章能帮到从百度进来的朋友,如果你对本博客又更好的意见,欢迎留言反馈。