opacity在IE6~8下無效果，解決的辦法

時間 2019-11-13

原文原文鏈接

opacity在IE6~8下無效果，解決的辦法

問題出現時rgba()在ie6下不出效果，最後查到是opacity的問題。css

opacity是css3時出現的，目前主流瀏覽器都支持。but老IE是個麻煩的問題。html

filter:alpha(opacity=50);css3

總結網上經驗： 1 <!doctype html>chrome

 2 <html>
 3 <head>
 4     <meta charset='utf-8'>
 5     <meta name='author' content='w201604007-宋英傑'>
 6     <title>opacity</title>
 7     <style type='text/css'>
 8  html,body,div{margin:0;padding:0;}
 9  body{background:#FFF;}
10  .s1{font-family:serif;
11  background-color:rgb(120,160,9);opacity:0.4;/*ff46,chrome49,opara36,ie9不透明度,透明度效果，包括了文字*/
12         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更新*/

13     </style>
14 </head>
15 <body>
16     <p class="s1"><span>serif字體</span></p>
17 </body>
18 </html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~瀏覽器

直接rgba對底色加樣式，再兼容ie6，代碼以下：學習

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset='utf-8'>
 5     <meta name='author' content='w201604007-宋英傑'>
 6     <title>opacity</title>
 7     <style type='text/css'>
 8         html,body,div{margin:0;padding:0;}
 9         body{background:#FFF;}
10         .s1{font-family:serif;
11         background-color:rgba(169,169,169,0.7);/*opacity:0.4;ff46,chrome49,opara36,ie9不透明度,文字無*/
12         zoom:1;filter:alpha(opacity=70)progid:DXImageTransform.Microsoft.gradient(startColorstr=#A9A9A9,endColorstr=#A9A9A9);
13         /*ie6測試，底色變成了#c2c2c2,有透明度效果，但也包括了文字*/
14     </style>
15 </head>
16 <body>
17     <p class="s1"><span>serif字體</span></p>
18 </body>
19 </html>

拋磚引玉，有更好的方法，你們能夠評論告知，互相學習。測試

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。