css设置背景半透明，文字不半透明

浏览数：44 / 时间：2015年06月09日

现在很多网站都喜欢用半透明的效果显示内容，让人看起来很舒服，不像实色背景看起来那么厚重，但是我们写效果的时候都是希望半透明只作用在背景上，所以经过试验，总结了几种让背景半透明，而文字不半透明的效果，欢迎指点和补充~~

方法一：

以前经常用的，半透明层和文字层分离，用一个单独的标签来显示半透明层，这样文字层和半透明层互不影响，但是不好的就是增加了标签

<style type="text/css">
.opacity01 div, .opacity01 span{
    width:100%;
    height:100%;
}
.opacity01{
    width:200px;
    height:24px;
    line-height:24px;
    text-align:center;
    position:relative;
    border:1px solid #ccc;
}
.opacity01 div{
    background:#FFF;
    opacity:0.5;                 /*非IE*/
    filter:alpha(opacity=50);    /*IE*/
}
.opacity01 span{
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    color:#000;
}
</style>
<div class="opacity01"><div></div><span>方法一：半透明文字</span></div>

方法二：

建议使用这个，代码相对来说比较简洁

<style type="text/css">
.opacity02{
    width:200px;
    height:24px;
    line-height:24px;
    text-align:center;
    border:1px solid #ccc;
    color:#000;
  
    background: #FFF;
    background:rgba(255,255,255,0.5);     /*非IE678*/
    filter:alpha(opacity=50);             /*IE789*/ 
}
/*  
 *  由于rgba和filter都会在IE9上生效，但是效果不是覆盖，而是叠加
 *  所以IE9上效果会加倍，所以还要给IE9再去掉一倍的效果
 */
:root .opacity02{
    filter:alpha(opacity=100);
}
.opacity02 span{
    position:relative;
}
</style>

<!--  <div class="opacity02">方法二：半透明文字</div>   -->     <!--IE678里字体会半透明-->
<div class="opacity02"><span>方法二：半透明文字</span></div>

方法三：

用滤镜的方法来使IE支持半透明，但是滤镜的代码比较难记，而且复杂，不建议使用

<style type="text/css">
.opacity03{
    width:200px;
    height:24px;
    line-height:24px;
    text-align:center;
    border:1px solid #ccc;
    color:#000;
    
    background:rgba(255,255,255,0.5) !important;      /*非IE6*/
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#80FFFFFF‘, EndColorStr=‘#80FFFFFF‘);   /*IE*/
}
/* 
 * 08FFFFFF中FFFFFF是颜色值，08是计算过后的一个十六进制的值
 * 08的计算方法  将四舍五入后的  255*半透明值  转换为十六进制  后得出
 * 由于两种方法都支持IE9，所以还要给IE9单独设置
*/
:root .opacity03{
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=‘#00FFFFFF‘, EndColorStr=‘#00FFFFFF‘);
}
</style>
<div class="opacity03">方法三：半透明文字</div>