zoukankan      html  css  js  c++  java
  • firefox与IE透明度(opacity)设置区别

    IE:
    filter:alpha(opacity=sqlN)
    其中 sqlN的值域为[0, 100]

    js: ieNode.style.filter="alpha(opacity=sqlN)";  

    Firefox,Chrome和Safari:
    opacity:sqlN
    其中sqlN的值域为[0, 1]

    js: firefoxNode.style.opacity=sqlN;  

    测试代码如下:

    <HTML>
    <HEAD>
        <style type="text/css">
            .ieCss {
                display:-moz-inline-box;
                display:inline-block;
                width:100;
                height:100;
                background-color:red;
                filter:alpha(opacity=20);
            }
            .fireFoxCss {
                display:-moz-inline-box;
                display:inline-block;
                width:100;
                height:100;
                background-color:blue;
                opacity:0.5;
            }
        </style>
    
        <script>
            window.onload = function() {
                //设置IE
                var ieSpanJs = document.getElementById("ieSpanJs");
                ieSpanJs.style.display = "inline-block";  //ie支持
                ieSpanJs.style.width = 100;
                ieSpanJs.style.height = 100;
                ieSpanJs.style.backgroundColor = "red";
                ieSpanJs.style.filter="alpha(opacity=20)";
    
                //设置firefox
                var firefoxSpanJs = document.getElementById("firefoxSpanJs");
                try
                {
                    firefoxSpanJs.style.display = "-moz-inline-box"; //firefox支持
                }
                catch (e)
                {
                    firefoxSpanJs.style.display = "inline-block"; //支持IE
                }
    
                firefoxSpanJs.style.width = 100;
                firefoxSpanJs.style.height = 100;
                firefoxSpanJs.style.backgroundColor = "blue";
                firefoxSpanJs.style.opacity="0.5";
    
            }
        </script>
    
    </HEAD>
    
    <BODY>
    <span id="ieSpanCss" class="ieCss">IE_css</span>
    <span id="firefoxSpanCss" class="fireFoxCss">firefox_css</span>
    <br>
    <br>
    <span id="ieSpanJs">IE_Js</span>
    <span id="firefoxSpanJs">firefox_Js</span>
    </BODY>
    </HTML>

    补充:参考资料中对firfox还有3.5之前和3.5之后版本的区分,暂时忽略。

    参考文档:

    http://hi.baidu.com/hanserv/item/ac31a23f0c578bffdf222114

  • 相关阅读:
    Nuget相关设置
    MSBuild笔记-预留
    .NET Core笔记-File Providers(文件系统)
    JS混淆助手类
    .Net Core
    ASP.NET Core中间件
    ASP.NET Core中间件
    使用表达式树和反射来访问对象属性的性能比较【转】
    Newtonsoft.Json笔记 -ContractResolver
    Newtonsoft.Json笔记 -JsonConvert自定义序列化与反序列化
  • 原文地址:https://www.cnblogs.com/jsxiangxiang/p/3051538.html
Copyright © 2011-2022 走看看