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

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

方法一:

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

<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> 

最后效果:

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。