首页 > 代码库 > css设置背景半透明,文字不半透明

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> 

最后效果:

 

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