透明度的设置问题

Posted 陈陈陈chen

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了透明度的设置问题相关的知识，希望对你有一定的参考价值。

1、透明度的样式设置：

透明度在IE浏览器和其他相关浏览器中的设置方法不太相同，IE使用filter：alpha属性，firefox使用opactiy属性；

filter:alpha(opacity:30);
opacity:0.3;

 

2、原生js设置透明度
为了兼容IE与其他浏览器对透明度的设置，代码如下：

var alpha=30;
var mydiv=document.getElementById("myDiv");
mydiv.style.filter="alpha(opacity:"+alpha+")";
mydiv.style.opacity=alpha/100;

 

3、jQuery设置透明度
jQuery中对透明度的设置进行了整合，兼容IE和其他浏览器，修改opactiy属性值即可，值为小数，因此只需要设置一次即可；

代码如下:
$(function(){
$("#div1").css("opacity","0.3"); //设置透明度
});

 

4、举例：鼠标移入，透明度变小；鼠标移出，恢复。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js透明度动画</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        div{
            width:200px;
            height:200px;
            background-color:#f00;
            filter:alpha(opacity:100);/*IE浏览器*/
            opacity:1;/*Firefox浏览器*/
        }
    </style>
    <script>
        window.onload=function(){
            var mydiv=document.getElementById("myDiv");

            mydiv.onmouseover=function(){//鼠标移入
                startMove(30);
            }
            mydiv.onmouseout=function(){//鼠标移出
                startMove(100);
            }
        }

        var timer=null;
        var alpha=30;//透明度值变量

        function startMove(iTarget){
            var speed=0;
            var mydiv=document.getElementById("myDiv");
            clearInterval(timer);
            timer=setInterval(function(){
                if(alpha>iTarget){
                    speed= -10;
                }else{
                    speed= 10;
                }

                if(iTarget==alpha){
                    clearInterval(timer);
                }else{
                    alpha+=speed;
                    mydiv.style.filter="alpha(opacity:"+alpha+")";//设置IE透明度
                    mydiv.style.opacity=alpha/100;//设置Firefox透明度，值为小数，其实可以写成alpha*0.01
                }
            },50);
        }
    </script>
</head>
<body>
    <div id="myDiv"></div>
</body>
</html>

 

以上是关于透明度的设置问题的主要内容，如果未能解决你的问题，请参考以下文章

导航组件透明工具栏

在片段中使用 CoordinatorLayout 时如何使状态栏透明

PostgreSQL 是不是支持表（片段）的透明压缩？

带有透明状态栏的全屏片段（以编程方式）

活动接收全屏半透明DialogFragment背后的触摸事件

Android 4.4 — 半透明状态/导航栏 — fitSystemWindows/clipToPadding 不能通过片段事务工作