div背景半透明 覆盖整个可视区域的遮罩层效果

原创 2013年12月04日 09:54:19

文章转自http://www.srcsky.com/tech/arts/206262.html

<!DOCTYPE html>
<html>   
    <head>
        <meta charset="gb2312" />
        <title>
            背景半透明覆盖整个可视区域
        </title>
        <style>
            html,body{ height:100%; margin:0; padding:0; font-size:14px;} 
            p{ line-height:18px;}
            .mask{height:100%; width:100%; position:fixed; _position:absolute; top:0;
            z-index:1000; } 
            .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000;
            } 
            .content{height:600px; width:800px; overflow:auto; border:2px solid #ccc;
            background-color:#fff; position:absolute; top:50%; left:50%; margin:-300px
            auto auto -400px; z-index:1001; word-wrap: break-word; padding:3px;} 
            .ph{
            height:1000px;}
        </style>
    </head>
    
    <body>
        <p class="ph">
            place holder height:1000px;
        </p>
        <div class="mask opacity">
        </div>
        <div class="content">
            <h1>
                背景半透明覆盖整个可视区域
            </h1>
            <p>
                这个效果效果在工作中经常会遇到,这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。 下面我们通过一个简单的例子看看如何实现,高手请绕道。
            </p>
            <p>
                html代码很简单
                <div class="mask opacity">
                    </div>
            </p>
            <p>
                1 、半透明效果可以使用 css3 中的 opacity 属性,在低版本的IE浏览器中使用IE的alpha 滤镜。代码:
                <code>
                    .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000;
                    }
                </code>
            </p>
            <p>
                2 、要覆盖整个可视区域通常的做法是:
                <br/>
                <code>
                    html,body{ height:100%}
                </code>
                <br/>
                <code>
                    .mask{height:100%;width:100%;}
                </code>
                <br/>
                但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的,在其他浏览器中首屏以下的没能被遮盖住,为了兼容其他浏览器我们可以使用
                <code>
                    position:fixed;
                </code>
                来解决这个问题
            </p>
            <p>
                <strong>
                    完整的代码
                </strong>
                :
                <pre>
                    html,body{ height:100%; margin:0; padding:0} .mask{height:100%; width:100%;
                    position:fixed; _position:absolute; top:0; z-index:1000; } .opacity{ opacity:0.3;
                    filter: alpha(opacity=30); background-color:#000; }
                </pre>
            </p>
        </div>
    </body>
</html>

 

 

移动端开发全屏遮罩层的简单制作

最近在一个新项目上,需要制作遮罩层,但是这个项目又没有用框架,只能手写遮罩层了 然后就在网上搜索了一下,大多数的就是通过JS来判断,进而实现遮罩层,问题是通 过JS来判断实现遮罩层,不能实现全屏遮...

精确定位浏览器内部可视区域大小并弹出遮罩层

代码: 始终居中的弹出层 var winWidth = 0; var winHeight = 0; function findDimensions(){ /...

jquery弹出半透明遮罩层

  • 2013年11月12日 10:48
  • 45KB
  • 下载

自定义半透明遮罩层

  • 2012年11月12日 18:00
  • 184KB
  • 下载

C#实现Winform自定义半透明遮罩层

http://www.soaspx.com/dotnet/csharp/csharp_20120707_9387.html 在网页中通过div+css实现半透明效果不难,今天我们看看...

自定义半透明遮罩层-源码

  • 2017年08月10日 15:32
  • 104KB
  • 下载

C# 自定义半透明遮罩层

  • 2012年07月28日 00:51
  • 58KB
  • 下载

C#实现Winform自定义半透明遮罩层

在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: ...

【转】C#实现Winform自定义半透明遮罩层

转自:http://www.cnblogs.com/JuneZhang/archive/2012/07/06/2579215.html 在网页中通过div+css实现半透明效果不难,今天我们...

C# Winform 实现自定义半透明loading加载遮罩层

在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div背景半透明 覆盖整个可视区域的遮罩层效果
举报原因:
原因补充:

(最多只允许输入30个字)