遮罩层的简单实现

最新推荐文章于 2019-10-21 22:43:56 发布

老米的世界

最新推荐文章于 2019-10-21 22:43:56 发布

阅读量707

点赞数

分类专栏： HTML 文章标签： html opacity

本文链接：https://blog.csdn.net/MPFLY/article/details/78285574

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

主要就是操作opacity这一属性。不透明度。
IE9以上, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>遮罩层</title>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

        <style type="text/css">
            .mask{
                width: 100%;
                height: 100%;
                display: none;
                position: absolute;
                top: 0px;
                left: 0px;
                background-color: #777;

                z-index: 100;

                /*透明度*/
                /*ie9以下*/
                filter:alpha(opacity=40); 
                /*火狐*/
                -moz-opacity: 0.4;
                opacity: 0.4;
            }
            .hideMask{
                position: absolute;
                top: 100px;
                left: 300px;
                z-index: 102;
                display: none;
            }
        </style>
        <script type="text/javascript">
            $(function(){

                var mask = $(".mask");
                var hideMask = $(".hideMask");
                $('.showMask').click(function(){
                    mask.show();
                    hideMask.show();
                });
                hideMask.click(function(){
                    mask.hide();
                    hideMask.hide();
                });

            });
        </script>
    </head>

    <body>
        <div class="mask">
        </div>
        <button class="hideMask">关闭遮罩层</button>
        <button class="showMask">显示遮罩层</button>

    </body>
</html>

老米的世界

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
遮罩层的简单实现

主要就是操作opacity这一属性。不透明度。 IE9以上, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。 IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。<!DOCTYPE html
复制链接

扫一扫

专栏目录