RGBA 与背景透明、flash透明

RGBA-浏览器参照基准：IE9+, Firefox3.6+, Chrome5+, Safari5+, Opera10.53+

语法：rgba(0-255,0-255,0-255,0-1)

HEX颜色中的黑色：

background-color:#000000;

RGB颜色中的黑色：

background-color:rgb(0,0,0);

RGB颜色+opacity透明度(50%透明度的黑色)：

background-color:rgb(0,0,0);
opacity:.5;

RGBA颜色(50%透明度的黑色)：

background-color:rgba(0,0,0,.5);

背景透明-浏览器参照基准：IE, Firefox3.6+, Chrome5+, Safari5+, Opera10.53+

效果演示：error

这是一个不成功的背景透明内容不透明效果，你会看到背景及内容两者都透明了

将内容和背景分别放到不同的层，然后将背景设置成透明，两者就互不相关了

效果演示：success

这是一个在所有主流浏览器下都可以看到的背景透明，内容不透明的效果

将内容和背景分别放到不同的层，然后将背景设置成透明，两者就互不相关了

效果演示：RGBA

这是一个用RGBA实现的背景透明内容不透明的效果

直接用RGBA值作为背景色

.opacity{
    position:relative;
    z-index:3;
    width:380px;
    height:80px;
    padding:20px;
    background-color:#000;
    color:#fff;
    filter:alpha(opacity=60); /* For IE */
    opacity:.6;
}

.opacity-text{
    position:relative;
    z-index:3;
    width:380px;
    height:80px;
    padding:20px;
    color:#fff;
    margin-top:-120px;
}
.text{
    position:relative;
    z-index:1;
    width:320px;
    height:20px;
    margin:-110px 0 0 10px;
    padding:50px;
    background:#f00;
}

.rgba-opacity{
    position:relative;
    z-index:3;
    width:380px;
    height:80px;
    padding:20px;
    background-color:rgba(0,0,0,.7);
    color:#fff;
}

最新式的半透明效果实现

推荐的半透明实现方法，简单易用！

具有半透明背景的文字，文字过长也不要紧的哦，布局良好！

.text-cover {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.text-cover i {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    color: #fff;
    font-style: normal;
    text-indent: 10px;
    /* 此种缩进实现边距，针对单行文本甚是有效，多行则不行，可通过 padding: 0 10px 来设置，
    注意右侧文本不要贴边，如此100%的宽度会溢出，需在父层设置 overflow: hidden; */

    /* 半透明核心代码 */
    background-color: rgba(0, 0, 0, 0.5);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#7F000000, endColorstr=#7F000000);
    /* 此处的 */
}

说明：#88000000 的前两位数字控制透明度，取值16进制从00 -> FF（越小越透明），00表示完全透明，FF就是全不透明，后面六位是色值。

知识扩展：

DXImageTransform.Microsoft.gradient 滤镜里的 startColorstr 参数值是 #AARRGGBB 形式的，其中的AA是代表不透明度的十六进制，00表示完全透明，FF就是全不透明，化成十进制的范围就是0~255，剩下的 RRGGBB 就是颜色的十六进制代码。

举例如：background: rgba(125, 0, 0, .3); 表示的是30%不透明度的红色背景。把30%的不透明度转换成十六制呢的方法如下：先计算#AA的的十进制x，x/255 = 3/10，解得x=3*255/10，然后再把x换算成十六进制，约等于4C。

常用透明度对用关系：

.0（00） .1（19） .05（0C） .15（26）
.2（33） .3（4C） .25（3F） .35（59）
.4（66） .5（7F） .45（72） .55（8C）
.6（99） .7（B2） .65（A5） .75（BF）
.8（CC） .9（E5） .85（D8） .95（F2）

显示隐藏有透明度变化时，IE8-下的滤镜透明有时出问题(待进一步研究)，设置时间为0可解决

全兼容半透明测试，五种颜色及透明度。设置背景图片作为陪衬对比，增强浏览效果。

颜色：白
透明度：.8 #CC 颜色：黑
透明度：.5 #7F 颜色：红
透明度：.4 #66 颜色：绿
透明度：.3 #4C 颜色：蓝
透明度：.2 #33

.box1 { background-color: rgba(255, 255, 255, .8);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF); }
.box2 { background-color: rgba(  0,   0,   0, .5);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#7F000000, endColorstr=#7F000000); color: #fff;}
.box3 { background-color: rgba(255,   0,   0, .4);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#66FF0000, endColorstr=#66FF0000); }
.box4 { background-color: rgba(  0, 255,   0, .3);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#4C00FF00, endColorstr=#4C00FF00); }
.box5 { background-color: rgba(  0,   0, 255, .2);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#330000FF, endColorstr=#330000FF); }

针对Win7下的IEtester中IE6不透明，可在滤镜前单独设置 _background 色，如下：
.box5 {
    background-color: rgba(  0,   0, 255, .2);
    _background: #00f;
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#330000ff, endColorstr=#330000ff);
}
但事实上，原生的IE6是支持的，无需单独设置 _background 色。

问题及注意事项：

今天(2014-01-06)注意到一个问题，IE中使用如上滤镜方法，若有显示隐藏的交互时，不能有渐变透明度的变化，即透明度变化时间大于0，有时出问题，可能是页面比较大的情况下。做测试如上：

RGBA 与 背景透明、flash透明