使用RGBA实现颜色半透明并兼容低版本IE浏览器

2017-4-15 17:45 来自本站原创 19,759 8 6
[摘要]

在处理前端页面颜色半透明的时候,使用rgba颜色是最简单有效的,但是rgba在ie8以及下版本的IE上不支持,本文提供一个完美的解决办法。

我们在设计页面的时候需要使用处理一些元素颜色的透明度来达到更好的效果,如幻灯焦点图的文本描述底色多为半透明的黑色,这样比直接使用纯黑底色美观。为了实现这个效果,一般我们会在css中直接使用rgba颜色。

使用RGBA实现颜色半透明并兼容低版本IE浏览器

如:background-color{background:rgba(0,0,0,.5);}  来表示半透明的黑色。

RGBA颜色简述

所谓rgba颜色,就是R+G+B+A的颜色,再具体点就是RED+GREEN+BLUE+ALPHA的颜色,翻译一下就是红+绿+蓝+Alpha透明的颜色;我们平时使用较多的为16进制颜色,如白色#000000;使用rgb颜色表示白色就是rgb(0,0,0);实质上是一样的,只不过一个是16进制,一个是二进制;

rgba则加入一个透明度Alpha,也就是rgba中的a值,取值为0-1之间的小数来实现颜色的不透明度,这个css3属性的出现让前端颜色半透明效果实现更加简单了,但是令人蛋疼的是IE8及以下版本并不支持RGBA,虽说现在低版本的市场占有率已经很低了,但是在实际项目中还是需要兼顾一下IE8甚至是ie7的用户的。

例如 background-color{background:rgba(0,0,0,.5);} 这个半透明黑色在IE8以及下浏览器中就等同于无。

有人会说直接使用IE的半透明滤镜来实现filter:alpha(opacity=50);不然因为此滤镜会让整个元素都呈现半透明的状态,例如幻灯片文本背景半透明,而文字本事也会半透明,非常的“不清真”啊!

兼容IE的颜色半透明解决办法

既然IE半透明滤镜不行,咱们只有想别的办法,那就是使用IE渐变滤镜FILTER:progid:DXImageTransform.Microsoft.Gradient

语法:

filter:progid:DXImageTransform.Microsoft.Gradient(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 。不透明黑色。

看了上面的专业介绍,肯定很多新手会懵逼,我通俗的讲,它是IE的渐变滤镜,startColorStr为渐变开始颜色,endColorStr为渐变结束颜色,而后面的值就是我们需要填写的,如果俩颜色不一样,就会出渐变色,如果两处值一样,就会不会渐变,这个值的颜色可以实现半透明,而且IE是支持的。看到这,就很明了的,我们使用渐变滤镜,但是不让颜色渐变,两处值写一样的,仅仅是为了使用其中不透明度。

其中值的填写需要注意:#AARRGGBB跟RGBA是不是有点联系?是的,这两个都是要填写颜色的,但是区别是RGBA是二进制颜色+十进制小数;而#AARRGGBB是16进制不透明度+16进制颜色,如我们想实现半透明黑色,RGBA值为rgba(0,0,0,.5);#AARRGGBB值则是#7F000000;前面的7f是0.5的16进制,后面的000000则是黑色的十六进制值,下表列出rgba 透明度和IEfilter值的对应。

使用RGBA实现颜色半透明并兼容低版本IE浏览器

至此,一个兼容低版本IE的半透明黑色背景css样式出来了

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

当然,举一反三,半透明红色背景css则是

div{
 background:rgba(255,0,0,.5);
 filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7FFF0000,endcolorstr=#7FFF0000);
}

不透明度也可以根据上面表中的值进行修改。

IE9中bug的解决

上面我们讲到RGBA在IE9及以上的浏览器中是支持的,而渐变滤镜也是工作的,就出现了IE9中RGBA和渐变滤镜颜色叠加的情况,如果上述半透明黑色背景在IE9中会出现颜色变深的情况

此时,我们需要将渐变滤镜关闭,使用:root选择器,在加一句样式即可

:root div { filter: none; }

:root 选择器匹配文档根元素,在 HTML 中,根元素始终是 html 元素。因为是css3属性,:root 选择器只会在IE9及以上版本的浏览器中工作,所以一个完美的半透明黑色背景css是下面这样的。

div{
 background:rgba(0,0,0,.5);
 filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);
}
:root div { 
 filter: none; 
}

RGBA在IE9以下失效,filter渐变滤镜接替工作,而在ie9以上RGBA开始工作同时关闭filter,完美!!

本文最后更新于2017年4月15日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:8   其中:访客  7   博主  1
    加载中...
    1. 1年前 (2017-04-21) 6楼

      不错··大力支持

    2. 1年前 (2017-04-20) 5楼

      兼容性实在太头疼

    3. 1年前 (2017-04-19) 4楼

      为什么要兼容老IE.

      • 飞鸟
        1年前 (2017-04-19)  地下1层

        @呆毛电脑配置网: 因为做项目要考虑到用户的实际情况,虽然工程师都不愿意搭理IE,但奈何不了国内IE仍有份额

    4. 1年前 (2017-04-16) 板凳

      老版IE的存在增加了很多的代码执行效率问题!

    5. 1年前 (2017-04-16) 椅子

      不错,不过我现在几乎都不考虑对老版IE的支持了!

    6. 1年前 (2017-04-16) 沙发

      不明觉厉。虽然没怎么看懂,不过还是为博主的条例分明的讲解赞一个

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    8 6 19,759
    13
    Top