首页 > 代码库 > 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设置背景半透明，文字不半透明
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。