opacity 属性

CSS 中的 opacity 属性用于给元素指定一个 0 (全透明) 至1 (不透明) 的透明度值，但是这个值会应用到覆盖在背景之上的元素。

兼容性如下:
Chrome FireFox Internet Explorer Opera Safari
1.0 1.0 9.0 9.0 1.2

IE中的半透明

在 IE8 及早期版本的 IE 中，需要使用 IE 系私有的 filter 属性处理，其中分别有三种方式:

  • filter: alpha(opacity=value); [1]
  • filter: "alpha(opacity=value)"; [2]
  • -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; [3]
  • filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

[1] 直到 IE9 才支持 opacity 属性，但是在之前的版本中都使用支持 filter 替代，并且在IE中使用 filter 属性实现透明的元素需要触发 hasLayout 使其具备 layout 特性。

[2] 据说在 IE8 标准模式中，filter 属性的值需要使用引号包裹起来。

[3] IE4-IE9 中支持的一种扩展形式的编写方式。

[4] IE 中介绍了 -ms-filter，实质上只是 filter 属性的一个代名词。在 IE10 中不再存在。

前缀

FireFox 0.9 之前使用 -moz-opacity 实现，之后便重命名为 opacity。 但之后 -moz-opacity 一直都作为 opacity 的别名存在。但是 FireFox 3.5 之后不再支持 -moz-opacity 属性，此时也移除了在 JavaScript 中支持的 MozOpacity 属性。据说在 FireFox 早期版本中 opacity 属性的实现取决于其 Gecko 的版本。

在早期发布的 Safari 1.2 中支持 -khtml-opacity 的方式实现半透明。

Konqueror 从不支持 -khtml-opacity 的形式，而是从 4.0 开始便支持 opacity。

应用

在实际应用中，由于 opacity/filter 的透明度会应用于子元素，因而常见的的做法是使用两个毗邻的元素，一个用于处理背景层，一个用于处理前景的内容层。其中背景层的要层叠在内容层底部，使用定位的方式便可以实现。示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.bg {
    height: 100px;
    background: #000;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5;
}
.content {
    position: relative;
    top: 0;
    height: 100px;
    color: #fff;
    z-index: 10; /* 处理层叠 */
}
1
2
<div class="content">内容</div>
<div class="bg"></div>

RGBA

CSS 2.1 中开始支持 RGB 色彩值，CSS3 中为 RGB 色彩添加了 Alpha 通道。可以用于处理 alpha 渲染和 alpha 合成[据说 alpha 与 RGBA 是有故事的]。RGBA 允许将元素设置为透明，但不影响子元素。

1
2
3
.selector {
    background: rgba(0，200，200，.5);
}
RGBA兼容性
Chrome FireFox Internet Explorer Opera Safari iOS(Safari)
All 3.0 9.0 10.x+ 3.x+ All
IE中的RGBA

IE9 之前的 IE 版本不支持 RGBA，可以使用一个私有的 CSS 滤镜实现 RGBA 的效果。[IE 中的 : ARGB 啦] 示例代码:

1
2
3
.selector {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF,endColorstr=#FFFFFFFF);
}

DXImageTransform.Microsoft.gradient 滤镜中的 startColorstr 参数值是 #AARRGGBB 形式的，其中 AA 便是代表不透明度 (Alpha 通道值) 的十六进制表示，其中 00 表示全透明，FF 表示完全不透明，转化为十进制便是 0~255 范围之间的值，剩下的六位便是 RRGGBB 颜色的十六进制代码。

Alpha计算方式: x = value*255/10 -> 再转换为十六进制。

应用

RGBA 可应用于 background，border 属性中，在早期版本的 FireFox 中 border 的拐角处的 rgba 会叠加。[测试在 FireFox17 中不再出现叠加的现象]。

在 IE9 中，已经支持 RGBA 形式，但是同时也支持 filter 形式。因此需要使用 hack 的方式清除 filter 形式。

1
2
3
:root .selector {
    filter: none\9;
}
转换函数

这里提供一个 RGBA 值转换为 ARGB 的函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*
 * @param Number 转换为十六进制的值
 */

function toHex (val){
    val = parseInt(val)
    val = Math.max(0，val)
    val = Math.min(val，255)
    val = Math.round(val)
    return '0123456789ABCDEF'.charAt((val - val % 16) / 16) + '0123456789ABCDEF'.charAt(val % 16)
}

/*
 * @param String 字符串形式的 rgba 值
 */

function toArgb (val){
    var valArr = val.split("(")[1].split(")")[0].split(","),
        red = toHex(valArr[0]),
        green = toHex(valArr[1]),
        blue = toHex(valArr[2]),
        alpha = toHex(valArr[3] * 255)
    return '#'+ alpha + red + green + blue
}