共计 1981 个字符，预计需要花费 5 分钟才能阅读完成。
前言
最近遇到了全浏览器兼容背景半透明的问题。大致有这么几个解决方案：
1. 使用半透明 png 图片平铺
2. 使用 opacity 属性
3. 使用 raba 颜色 +ie 的 filter 滤镜
总的来说，方法一最为简单，但 png 图片要比几行 css 大很多，还会增加服务器请求。方法二会使 opacity 下的子元素也全变透明，通过外部定位解决还会有一堆兼容问题。方法三是比较完美的解决方案，而且通过 less 把代码封装后能很方便的调用。
RGBA 颜色
rgba 颜色的四个属性分别表示 red 红色、green 绿色、blue 蓝色、alpha 透明度。通过这几个数值能够轻松实现背景透明。代码如下：
.backTtansparent{ /* 用于不支持 RGBa 的浏览器 */ background: rgb(0, 0, 0); /* RGBa, 透明度 0.6 */ background: rgba(0, 0, 0, 0.6); } |
这样透明只对背景生效，对于非 ie 浏览器是非常完美的解决方案。
不幸的是 ie8 及以下不支持 rgba 属性，并且经测试 ie9 会把 rgba 解析为全透明。
IE Filter
通过 background: transparent 注释可解决 ie9 解析 rgba 全透明问题。通过 ie 的 filter 属性 便可让 ie 支持背景透明。代码如下：
.backTtansparent{ background: transparent/9; /* For IE 5.5 – 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/ –ms–filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)”; } |
能够看到 filter 中的 8 位 16 进制的半透明颜色 #99000000 为 argb 颜色，既#AARRGGBB，前两位是透明度，后面分别是红绿蓝。
如果我们希望透明度为 0.6，则需要将 0.6 乘以 255, 再转化为 16 进制。最简单的方法是利用 JavaScript，在浏览器的调试面板里输入：
Math.floor(0.6 * 255).toString(16); |
回车后可以看到结果为 99。这样透明度 0.6 的黑色的 argb 颜色即为#99000000。
整合
将代码整合，完整的实现如下：
.backTtansparent{ /* Fallback for web browsers that doesn’t support RGBa */ background: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background: rgba(0, 0, 0, 0.6); /* For IE 5.5 – 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/ –ms–filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)”; } |
使用 LESS 封装
因为自己使用的 less，就用 less 封装了一下，开始时没在官方文档找到颜色值转换成 rgb 的方法（貌似 sass 直接使用 rgb($color)），然后在stackoverflow 搜索该问题，发现用hsla() 能够很完美解决。代码如下：
.backTtansparent(@color;@alpha){ @background: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); @ieAlpha:argb(@background); background: @color; background: @background; background: transparent/9; zoom: 1; filter:~“progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieAlpha}, endColorstr=@{ieAlpha})”; –ms–filter: ~‘”progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieAlpha}, endColorstr=@{ieAlpha})”‘; } |
这样每次调用时只需输入颜色跟透明度这两个参数就好。
文章来源: 纯 css 完美解决背景半透明方案及 less 封装
