纯css完美解决背景半透明方案及less封装 | 前端记录
前端记录 记录分享前端知识

前言

最近遇到了全浏览器兼容背景半透明的问题。大致有这么几个解决方案:

1.使用半透明png图片平铺

2.使用opacity属性

3.使用raba颜色+ie的filter滤镜

总的来说,方法一最为简单,但png图片要比几行css大很多,还会增加服务器请求。方法二会使 opacity 下的子元素也全变透明,通过外部定位解决还会有一堆兼容问题。方法三是比较完美的解决方案,而且通过less把代码封装后能很方便的调用。

RGBA颜色

rgba颜色的四个属性分别表示 red红色、green绿色、blue蓝色、alpha透明度。通过这几个数值能够轻松实现背景透明。代码如下:

这样透明只对背景生效,对于非 ie 浏览器是非常完美的解决方案。
不幸的是 ie8 及以下不支持 rgba 属性,并且经测试 ie9 会把 rgba 解析为全透明。

IE Filter

通过background: transparent注释可解决 ie9 解析rgba全透明问题。通过ie 的 filter 属性便可让 ie 支持背景透明。代码如下:

能够看到filter中的8位16进制的半透明颜色#99000000为argb颜色,既#AARRGGBB,前两位是透明度,后面分别是红绿蓝。

如果我们希望透明度为 0.6,则需要将 0.6 乘以 255,再转化为 16 进制。最简单的方法是利用 JavaScript,在浏览器的调试面板里输入:

css-background-transparency-solutions-img1
回车后可以看到结果为99。这样透明度0.6的黑色的argb颜色即为#99000000

整合

将代码整合,完整的实现如下:

使用LESS封装

因为自己使用的 less,就用 less 封装了一下,开始时没在官方文档找到颜色值转换成 rgb 的方法(貌似 sass 直接使用rgb($color)),然后在stackoverflow搜索该问题,发现用hsla()能够很完美解决。代码如下:


这样每次调用时只需输入颜色跟透明度这两个参数就好。

1 条评论

欢迎留言