JS实现背景透明度可变,文字不透明的效果

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

最近项目里需要实现这么个功能,类似网游中的聊天框,背景都是透明的,但是文字是不透明。所以如果简单的使用opacity(非IE)和alpha滤镜(IE)是无法实现这个效果的,会造成全部透明。

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

 

您可以参见下面各个浏览器对rgba的支持情况一览表,这个表不是我做的,里面把浏览器的祖宗十八代都挖出来了,不得不佩服图表制作者

解决办法如下:

浏览器、版本、平台 结果 后备
Firefox 3.6 (OS X) 作用 —
Firefox 3.0.5 (OS X) 作用 —
Firefox 3.0.5 (Windows XP, Vista) 作用 —
Firefox 2.0.0.18 (PC) 无作用 实色
Safari 4 (Developer Preview & 4.0.4, OS X) 作用 —
Safari 3.2.1 (OS X, Windows XP) 作用 —
Mobile Safari (iPhone) 作用 —
Opera 9.6.1 无作用 实色
Opera 10 Beta (Linux & Windows) 作用 —
Opera 10.10 (OS X) 作用 —
IE 4.01 无作用 没有颜色
IE 5.5 (PC via IETester) 无作用 没有颜色
IE 6 (PC via IETester) 无作用 实色
IE 7 无作用 实色
IE 8 (Beta 2 & release version) 无作用 实色
Google Chrome 0.4.154.33 (Windows XP) 作用 —
Google Chrome 1.0.154.46 (Windows XP) 作用 —
Google Chrome 4.0.249.49 (OS X) 作用 —
Netscape 4.8 (PC) 无作用 没有颜色
Navigator 9.0.0.5 Linus 无作用 实色
SeaMonkey 1.1.14 无作用 没有颜色
SeaMonkey 2.0 作用 —
Sunrise 1.7.5 作用 —
Stainless 0.2.5 作用 —
Flock 1.2.7 无作用 实色
Flock 2.0.2 作用 —
BlackBerry Storm Browser 作用 —
Camino 1.6.6 无作用 实色
Camino 2.0b1 作用 —
Iceape 1.1.14 (Linux) 无作用 实色
Kazehakase 0.5.2 (Linux) 无作用 实色
Avant 11.7 (Windows XP) 无作用 实色

1.实现完全透明:

 

设置background为transparent即可,两个浏览器通用

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

 

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

2.实现透明度可调节:

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

要求改透明度,这里IE和非IE需要分开处理

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

非IE浏览器可通过支持CSS3的方式处理(不支持CSS3的这里忽略了),css的写法是

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

background-color:rgba(255,255,255,0.5)

filter:alpha(opacity=50);

前面3个参数是RGB,最后个是透明度

不也很ok吗?

IE浏览器需要使用gradient滤镜,css写法是

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

filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff,endColorstr=#00ffffff)

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

摘录CSS手册说明用法:

此滤镜上半身特征是 FILTER:progid:DXImageTransform.Microsoft.Gradient
最简单的使用如下:

语法:

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

filter : progid:DXImageTransform.Microsoft.Gradient ( enabled= bEnabled
, startColorStr= iWidth , endColorStr= iWidth )

startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。
  其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB
为十六进制正整数。取值范围为 00 – FF 。 RR 指定红色值, GG
指定绿色值, BB 指定蓝色值,参阅 #RRGGBB 颜色单位。 AA 指定透明度。
00 是完全透明。 FF
是完全不透明。超出取值范围的值将被恢复为默认值。
  取值范围为 #FF000000 – #FFFFFFFF 。默认值为 #FF0000FF
。不透明蓝色。
EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅
startColorStr 属性。默认值为 #FF000000 。不透明黑色。

属性:

如下代码:

enabled  :  可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true |
false true  :  默认值 。滤镜激活。

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

false  :  滤镜被禁止。

这样就解决浏览器统一了

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

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

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