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


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

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

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

    filter:alpha(opacity=50);

    总结网上经验: 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: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>

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

  • 相关阅读:
    python 基础 7.1 datetime 获得时间
    Python 学习笔记12
    Python 学习笔记11
    Python 学习笔记10
    Python 学习笔记9
    Python 学习笔记8
    Python 学习笔记7
    Python 学习笔记6
    Python 学习笔记5
    Python 学习笔记4
  • 原文地址:https://www.cnblogs.com/tamato-jacob-wealllostcontrol/p/5456125.html
Copyright © 2020-2023  润新知