01月29, 2012

跨浏览器背景色渐变和透明

先从CSS实现背景色透明说起

传统CSS写法如下:

background:#ff0000;
opacity:0.5;
filter:alpha(opacity=50);

这种写法有一个不爽就是父元素的透明会导致子元素也跟着透明,通常解决方法是两个元素改为兄弟元素,原子元素定位到原父元素上,解决方法虽说不复杂,但有时候改变的DOM结构在语义上出现分歧。So,通过标准浏览器对CSS3的支持,寻觅到了另一个解决方案,写法如下:

background:rgba(0,0,0,0.5); /* Chrome, Saf, FF, Opera /
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); / IE6 - IE9 */

优点是什么?“子元素不再透明了!“,rgba的写法是CSS3中的,不必多说。代码中针对IE的写法复杂了很多,这个滤镜的作用是实现背景色渐变的效果。为什么能用来做背景色透明,先看一看手册:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#ff000000,enabled=true,gradientType='1');
/*
startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。
其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。
EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。默认值为 #FF000000 。不透明黑色。
enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。  true | falsej。
GradientType:可选项。整数值(Integer)。设置或检索色彩渐变的方向。1 | 0,0(默认)纵向,1横向。
*/

如上所示,#AARRGGBB中AA是指定的透明度,那么把开始颜色和结束颜色设置为相同的值时就实现了与rgba方法相同的透明效果。 存在的一些问题,1、带背景图的没有找到可替代办法,2、在项目中使用这个方法实现了一个弹出组件的遮罩层,发现IE中鼠标还是可以点到原网页中的元素,称它为无法实现遮罩吧。 除了以上两种情况下此方法还是可以托适用于很多地方,利用的正是他不会对使其子元素跟着父元素透明。

CSS背景色渐变 已经知道了IE实现背景色渐变的方法,那么跨浏览器实现背景色渐变也就不是难题了,代码如下:

background-image: -moz-linear-gradient(top,#ffffff,#000000);  /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#000000)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #ffffff, #000000); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -ms-linear-gradient(top,#ffffff,#000000); /* IE10 */
background-image: -o-linear-gradient(top,#ffffff,#000000); /* Opera 11.10+ */
background-image: linear-gradient(top, #ffffff, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#ff000000,enabled=true,gradientType='1'); /* IE6–IE9 */

IE滤镜可以实现渐变加透明,CSS3中也是可以的,只要将#000000写法改为rgba(0,0,0,0.5)就可以了。

其实IE对一些CSS3中的实现老早就有滤镜支持,只是鲜为人知,而现在随着IE9、IE10对CSS3的支持,IE6.7.8份额的减少,IE滤镜终将消失。

本文链接:https://75team.com/post/跨浏览器背景色渐变和透明.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。