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>

 

 

基于echarts的背景色渐变和图例渐变的实例

本博客实例是基于echarts3的
  • u013808809
  • u013808809
  • 2017年03月02日 19:45
  • 8942

AngularJs 遮盖

AngularJS 自定义标签 实现遮盖 公用
  • qq_36020545
  • qq_36020545
  • 2016年12月23日 09:59
  • 777

浏览器可视区域遮罩

原文地址 http://www.sub-273.com/archives/451思路:遮罩的部分用一个层来实现..定位时候用fixed, 从而使其不会随着滚动条而变化位置..提示框也是这个属性..只是...
  • KSJSOFTWLB
  • KSJSOFTWLB
  • 2010年10月22日 11:56
  • 503

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

代码: 始终居中的弹出层 var winWidth = 0; var winHeight = 0; function findDimensions(){ /...
  • huxiweng
  • huxiweng
  • 2012年02月13日 17:51
  • 1770

angularjs loading遮罩层

  • 2017年04月18日 15:58
  • 278KB
  • 下载

angularjs拦截器实现loading

.mask-loading .loading-icon { -webkit-animation: rotate 1s linear infinite; ...
  • u014788227
  • u014788227
  • 2016年03月07日 15:10
  • 3258

背景半透明覆盖整个可视区域

背景半透明覆盖整个可视区域 html,body{ height:100%; margin:0; padding:0; font-size:14px;} ...
  • jimlong
  • jimlong
  • 2014年11月15日 01:00
  • 834

div半透明遮罩效果

效果
  • WeLoveSunFlower
  • WeLoveSunFlower
  • 2014年07月23日 15:31
  • 4888

用angular $httpProvider做路由加载遮罩层

$httpProvider是一个路由拦截器 拦截器允许有一下四个操作: 1、 请求的拦截:request 这个方法的调用在$http请求之前 所以在此之前我们可以修改配置和进行其他操作! 2、 拦截响...
  • u011186228
  • u011186228
  • 2017年06月27日 15:45
  • 184

angular中model弹框消失后遮罩层未隐藏的解决方法

在做项目的时候,遇到个问题,在controller中执行弹出框隐藏函数后立即跳转路由,出现遮罩层不隐藏的情况 showAlertDialog函数如图,即1秒后模态框自动隐藏 打开浏览器调试...
  • MURPHY_WNAG
  • MURPHY_WNAG
  • 2017年03月26日 19:45
  • 1168
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div背景半透明 覆盖整个可视区域的遮罩层效果
举报原因:
原因补充:

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