纯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，在浏览器的调试面板里输入：

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

整合

将代码整合，完整的实现如下：

使用LESS封装

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