纯色半透明

  我们常常需要这样的效果:半透明的纯色背景浮动着高亮不透明的文本。当然,通常我们有两种实现方式,总结如下——

  1> 第一种实现方式:使用opacity和filter: alpha(opacity=XX)

div.x {
    width: 500px;
    height: 50px;
    background-color: black;
    
    /* 这种方式使得里面的内容也呈现为半透明 */
    filter: alpha(opacity=70);                        /* 针对IE */
    opacity: 0.7;                                     /* 针对非IE */
    
    /* 在这里,我们当然可以使用双div叠加的方式达到使得里面的内容不发生透明 */
}

  2> 第二种实现方式:使用RGBA和ARGB

div.y {
    width:500px;
    height:50px;
    /* 通用浏览器用rgba */
    background-color: rgba(0, 0, 0, 0.7);
    /* ie用ARGB */
    /* 其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 
     * RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,参阅 #RRGGBB 颜色单位。 
     * AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。 
     * 取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。 
     */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);
    color: white;
}

  OK,用着都还不错。倾向于用哪个,随你而定。

原文地址:https://www.cnblogs.com/jinguangguo/p/2654614.html