zoukankan      html  css  js  c++  java
  • CSS实现 全屏 遮罩

            现在全屏的半透明遮罩层在web2.0网站应用非常广泛了,绝大多数遮罩是通过计算页面大小,然后覆盖一个与页面同等大小的层实现,如腾讯qzone, wordpress后台。这种方式本来无可非议,但是在页面很长的时候在IE8下会失效(国外资料的解释是与机器显卡相关),有些完美情节的同学遇到这个问题后就抓破了头,无奈之下甚至想让IE8强制使用IE7的方式解析他的作品。其实我们有一个更好的方法,咱们用CSS去解决它!

    还记得“position:fixed”吗?它是css2的一个新增的属性,他可以让一个元素静止在页面上,拖动滚动条也不会动,如Qzone顶部固定的导航栏就是这样实现的。同样我们也可以用一个100%高宽的层覆盖浏览器视口,这样就可以实现全屏遮罩了。不用再计算页面的大小,调整浏览器大小的时候也不要去动态修改尺寸了。

    遮罩 CSS:

    .divBG
    {
        background: gray;
        position: fixed;
        left: 0px;
        top: 0px;
        100%;
        height: 100%;
        display: none;
        z-index: 20;
        filter: alpha(opacity=60);
        opacity: 0.6 !important;
    }

    弹出层 CSS:

    .PopUp
    {
        position: fixed;
        display: none;
        z-index: 21 !important;
        background-color: White;
        900px;
        border-style: solid solid solid solid;
        border- 5px 5px 5px 5px;
        border-color: #cccc99;
        left: 50%;
        top: 50%;
        margin-top: -200px; /*--高度的一半--*/
        margin-left: -450px; /*--宽度的一半--*/
    }

  • 相关阅读:
    自定义一个运行时异常
    对象的知识点正确解释
    decimal模块
    B+树
    Web框架系列之Tornado
    初识git
    Mysql表的操作
    MySQl创建用户和授权
    MySql安装和基本管理
    为什么用Mysql?
  • 原文地址:https://www.cnblogs.com/suizhikuo/p/2973002.html
Copyright © 2011-2022 走看看