最新消息:文章中包含代码时,请遵守代码高亮规范!

IE半透明背景色兼容 说一说RGBA【转载】

HTML+CSS Nersk 675浏览 0评论

一、简单说下RGBA颜色

所谓RGBA颜色,顾名思意就是R+G+B+A的颜色,再具体点就是RED+GREEN+BLUE+ALPHA的颜色,小写一下就是red+green+blue+alpha的颜色,翻译一下就是红+绿+蓝+Alpha透明的颜色。

我们平时用的较多的是16进制颜色,例如黑色#000000;白色#FFFFFF,这些是16进制表示的颜色,如果使用RGB颜色表示就是rgb(0, 0, 0)与rgb(255,255,255),其实本质上是一样的,只是一个是16进制表示的,一个是二进制表示的(RGB颜色)。

而RGBA颜色归为CSS3属性,其余RGB的区别在于多了个A,也就是Alpha透明度,这是个很好的东西啊,我们以后要实现半透明效果(无论是背景,边框,文字颜色等都可以用半透明实现了),但是,一向不紧不慢,孤芳自赏的IE家族,目前为止还不支持rgba颜色,真是让人哀叹啊!

您可以参见下面各个浏览器对rgba的支持情况一览表,这个表不是我做的,里面把浏览器的祖宗十八代都挖出来了,不得不佩服图表制作者,一些跟凤姐一样稀奇古怪的浏览器可以直接忽略掉:

对于rgba的使用,您可以参见下面的简单示例:

background:rgba(200, 54, 54, 0.5);

其中,表示半透明度的0.5前面的0是可以省掉的,直接.5也是可以的。

正如上表所展示的,IE8及其以下都对实用的rgba颜色不支持,怎么半呢?

其实细想一下,rgba颜色多了个什么东西呢,不就是半透明吗,IE不是由半透明滤镜嘛,我们只要使用:

filter:alpha(opacity=50);

不也很ok吗?

是吗?只要静下来一想,完全不是那么回事,IE半透明滤镜透明的是整个元素,它可以只透明元素的边框吗?它可以只透明文字的投影吗?都不行。

正所谓车到山前必有路,IE下某一属性是可以实现类似于rgba的效果的,那就是半透明背景

二、IE下背景半透明的方案

实现IE下仅仅背景色的半透明没有什么玄乎的,就是IE滤镜,准确的讲是IE渐变滤镜。关于IE渐变滤镜,我曾在“CSS实现兼容性的渐变背景(gradient)效果”一文中有过一些介绍,但是不是很全。

这里可以稍微在补充下下:

此滤镜上半身特征是 FILTER:progid:DXImageTransform.Microsoft.Gradient

最简单的使用如下:

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#AARRGGBB,endColorStr=i#AARRGGBB)

startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。

其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 – FF 。 RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。

取值范围为 #FF000000 – #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。

EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。

此滤镜还有诸如Enabled参数和GradientType参数,具体含义不是本文重点,掠过~~

我们关心的是这里的颜色表示,即#AARRGGBB,看到这里前面的两个AA字母没,这个AA不是指吃饭K歌的AA,而是指rgba中的那个a,也就是透明度的意思,只是与rgba不同的是,这里的AA是要用16进制表示的(非小数值),也就是从00~FF,00表示完全透明了,FF则相当于rgba中1,表示完全不透明实色一个。

好了,现在这个买卖好做了,就像虽然闫凤娇和阿娇长相差异很大,但是都是很清纯的女生,于是呢,我们就可以实现兼容性,实现统一了。

 三、rgba+filter实现兼容性的半透明背景效果

参见如下的示例代码:

background:rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/18519.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Nersk的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!