标签：style blog http color io os 使用 ar for
现在很多网站都喜欢用半透明的效果显示内容，让人看起来很舒服，不像实色背景看起来那么厚重，但是我们写效果的时候都是希望半透明只作用在背景上，所以经过试验，总结了几种让背景半透明，而文字不半透明的效果，欢迎指点和补充~~
方法一：
以前经常用的，半透明层和文字层分离，用一个单独的标签来显示半透明层，这样文字层和半透明层互不影响，但是不好的就是增加了标签
<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>
最后效果：
标签：style blog http color io os 使用 ar for
原文地址：http://www.cnblogs.com/lorineying/p/4024998.html
