在乐享AI咨询 →
技术支持

让IE浏览器支持RGBa的背景色-联想乐享知识库

⚡ 核心结论

本文来源联想官方,解答关于 让IE浏览器支持RGBa的背景色 的常见问题,包括:联想电脑预装的IE浏览器无法显示RGBa背景色,怎么办等。

内容来源:联想官方

让IE浏览器支持RGBa的背景色 问题:浏览器 故障现象: 让IE浏览器支持RGBa的背景色。 解决方案: RGBa是一种在CSS中声明包含透明效果的颜色的方法,通过RGBa我们可以将一个元素设置为透明,而不会影响其子元素。但是并非所有的浏览器支持RGBa的背景色,其中用户颇多的老版本IE浏览器就不支持,好在IE浏览器支持条件注释,我们可以抛弃RGB并使用IE浏览器的一个私有CSS滤镜来实现同样的效果。 DXImageTransform.Microsoft.gradient滤镜里的startColorstr参数值是#AARRGGBB形式的,其中的AA是代表不透明度的十六进制,00表示完全透明,FF就是全不透明,化成十进制的范围就是0~255,剩下的RRGGBB就是颜色的十六进制代码。例子中background: rgba(12500 .3);表示的是30%不透明度的红色背景。如何把30%的不透明度转换成十六制呢?很简单,先计算#AA的的十进制x,x/255 = 3/10,解得x=3*255/10,然后再把x换算成十六进制,约等于4B。 RGBa颜色还可以用于border,不过,不同的浏览器对于border的RGBa支持不太一样,不过唯一的不同是,Firefox在border的拐角处会出现叠加,比如透明度是0.4,那么在Firefox中,四个角的透明度会变成0.8,而支持RGBa的非FF浏览器不会出现这种情况。

常见问题解答

联想电脑预装的IE浏览器无法显示RGBa背景色,怎么办

原因是老版本IE浏览器不支持CSS中的RGBA颜色语法,但可通过IE私有滤镜实现等效效果。具体步骤:1. 将RGBA值如rgba(255,0,0,0.3)中的透明度0.3换算为十六进制——计算0.3×255≈76.5,取整76,转为十六进制得4C;2. 构造#4CFF0000(AA+RRGGBB格式);3. 在CSS中为IE添加条件注释代码:background: none; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4CFF0000', endColorstr='#4CFF0000'); 注意:该方案仅适用于IE6-9,且仅对背景色生效,不适用于border;Firefox处理RGBA边框时存在角部透明度叠加问题,其他现代浏览器无此现象。