CSS:跨赏识器复合配景
最近发明白一个让 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/ (编辑:河北网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |