opacity在IE6~8下无效果，解决的办法

时间：2021-07-24 10:01:14

opacity在IE6~8下无效果，解决的办法

问题出现时rgba()在ie6下不出效果，最后查到是opacity的问题。

opacity是css3时出现的，目前主流浏览器都支持。but老IE是个麻烦的问题。

filter:alpha(opacity=50);

总结网上经验： 1 <!doctype html>

 <html>

 <head>

     <meta charset='utf-8'>

     <meta name='author' content='w201604007-宋英杰'>

     <title>opacity</title>

     <style type='text/css'>

         html,body,div{margin:0;padding:0;}

         body{background:#FFF;}

         .s1{font-family:serif;

         background-color:rgb(120,160,9);opacity:0.4;/*ff46,chrome49,opara36,ie9不透明度,透明度效果，包括了文字*/

         zoom:1;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);/*ie透明度效果，包括了文字*/
　　　　　　filter:alpha(opacity=40);zoom:1;position:static;
}
　　　　　　.s1 span{color:#000;position:relative;}/*文字、背景分离分别给样式,结合定位2.16.5.28更新*/

     </style>

 </head>

 <body>

     <p class="s1"><span>serif字体</span></p>

 </body>

 </html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

直接rgba对底色加样式，再兼容ie6，代码如下：

 <!doctype html>

 <html>

 <head>

     <meta charset='utf-8'>

     <meta name='author' content='w201604007-宋英杰'>

     <title>opacity</title>

     <style type='text/css'>

         html,body,div{margin:0;padding:0;}

         body{background:#FFF;}

         .s1{font-family:serif;

         background-color:rgba(169,169,169,0.7);/*opacity:0.4;ff46,chrome49,opara36,ie9不透明度,文字无*/

         zoom:1;filter:alpha(opacity=70)progid:DXImageTransform.Microsoft.gradient(startColorstr=#A9A9A9,endColorstr=#A9A9A9);

         /*ie6测试，底色变成了#c2c2c2,有透明度效果，但也包括了文字*/

     </style>

 </head>

 <body>

     <p class="s1"><span>serif字体</span></p>

 </body>

 </html>

抛砖引玉，有更好的方法，大家可以评论告知，互相学习。

相关文章