CSS：跨浏览器复合背景
发布时间：2018-08-31 18:24:37 所属栏目：经验 来源：站长网
导读：最近发现了一个让 IE6~8 也能呈现 CSS3 Multiple Backgrounds（复合背景）的方法，当时我小小的震惊了一下。看来 IE6 曾经的辉煌不单是微软的捆绑和网银的支持造成的，在当年，它强大的功能也令其它浏览器难以追赶。废话不说了，先说说 CSS3 里的标准做法
|
最近发现了一个让 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也存在明显的不足：
本文权当开开眼界了，为了更快地拥抱 CSS3 ，请在不使用网银和支付宝时弃用 IE。 原文：http://blog.imbolo.com/cross-browser-css-mutiple-background/ （编辑：淮安站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
