国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > CSS:跨浏览器复合背景

CSS:跨浏览器复合背景

来源:程序员人生   发布时间:2013-10-31 04:24:46 阅读次数:3778次

最近发现了一个让 IE6~8 也能呈现 CSS3 Multiple Backgrounds(复合背景)的方法,当时我小小的震惊了一下。看来 IE6 曾经的辉煌不单是微软的捆绑和网银的支持造成的,在当年,它强大的功能也令其它浏览器难以追赶。废话不说了,先说说 CSS3 里的标准做法。

在 CSS3 标准里,Background 属性被赋予更加强大的功能,在 CSS2.1 的基础上,我们可以对一个对象同时使用多个背景图片。例如如下的样式:

#mutiple-bg {
background-image: url(top.png), url(middle.png), url(bottom.png);
}

添加符合背景图片的时候先从最顶层开始添加,按从高到低的顺序写样式。大家可以看这个 Demo。可以尝试用 IE 打开看看效果。

用 IE 打开过 Demo 的同学可以发现 IE 也能显示复合背景了,如果你查看过 DEMO 的源码,你可以发现我是通过 IE 滤镜来实现的。方法是先用标准的 CSS 加一个底层的背景,再通过滤镜添加上一层的背景。整个 Demo 的样式如下:

<style>
#demo {
width: 410px;
height: 290px;
border: #CCC dotted 1px;
margin: 120px auto 0;
background: url(anti-ie6-logo.png) left top no-repeat, url(bg.jpg) center top repeat; /* CSS3 */
}
</style>
<!--[if IE]>
<style>
#demo {
background: transparent url(bg.jpg) center top no-repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='anti-ie6-logo.png', sizingMethod='crop'); /* IE6~7 */
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='anti-ie6-logo.png', sizingMethod='crop')"; /* IE8 */
}
</style>
< ![endif]-->

IE 的不足

看到当年 IE 的强大了吧?最早开始支持复合背景的 Safari 3.1 诞生以前,IE6 早就可以通过滤镜制作出这种效果了。但IE也存在明显的不足:

  • 本例使用的滤镜没有提供调整图片位置的参数,至少我在 MSDN 的技术文档里没找到。
  • 目前 IE 只能制作出两层复合背景。

本文权当开开眼界了,为了更快地拥抱 CSS3 ,请在不使用网银和支付宝时弃用 IE。

原文:http://blog.imbolo.com/cross-browser-css-mutiple-background/

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生