IE浏览器和主流浏览器对css样式背景透明，字体不透明的处理方法

标签：

　　刚学习了css兼容性问题，兼容性问题是我们前端开发者必须要跨越的一道鸿沟，对于不同浏览器，我们都要考虑其兼容性，代码的可操作性，因为同一段代码可能在谷歌和火狐等等主流浏览器上显示是正常的，但是在IE浏览器上却显示的很怪异，尤其以IE6为主要照顾对象。

　　其他不多说，这里如标题所写的一样，我主要是解决css里实现背景透明而文字不透明的方法，经测试，自己写的代码在IE和非IE浏览器上都能正常显示，有代码不足之处，让大家指正，大家的努力才能创造我们web前端的明天。

在非IE浏览器下要实现背景和字体一起透明方法是：opacity:0.1（其中值取0-1之间，值越大，就越不透明）

要非IE浏览器下要实现背景透明，字体不透明方法：

（其中值取0-1之间，值越大，就越不透明）

在IE浏览下实现背景和字体都透明要调用IE滤镜命令：

（颜色自取，\9代表只能IE6、7、8识别）
filter:Alpha(opacity=20);

（其中值取0-100之间，值越大，就越不透明）

在IE浏览器下实现背景透明字体不透明，那么就需要在当前子元素下添加相对定位：

position: relative;

下面举一个列子：

css代码：<style>
    *{ padding: 0; margin: 0; }
    body{ padding: 50px;   }  
    #d1{ margin: 0 auto; width: 300px; height: 300px; 

 /*背景透明，字体不透明*/
 background-color: #ffffff; /*实现背景和所在子元素字体都透明*/
 opacity:0.1;
  /*支持IE6、7、8*/
  background-color: #ffffff\9;
  filter:Alpha(opacity=20); }  

p{ color: red; font-size: 50px text-align: center;
position: relative; /*//设置子元素为相对定位，可让子元素不继承Alpha值</style>} */

html代码：<div id="d1">
    <p>背景透明<br> 文字不透明</p>
</div>

如上就是全部的代码，我觉得只要用心，相信大家都能看的懂吧 `(*∩_∩*)′

IE浏览器和主流浏览器对css样式背景透明，字体不透明的处理方法

标签：

原文地址：http://www.cnblogs.com/gong-ping/p/4694637.html