zoukankan      html  css  js  c++  java
  • html-透明背景层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery手写弹出层背景半透明,内容不透明</title>
    <script src="jquery.min.js"></script>
    </head>
    <body>
    <style>
    *{ margin:0; padding:0;}
    .alertDiv{ position:fixed; width:100%; height:100%; top:0; color:#fff;}
    .alertCon{ position:absolute; width:100%; height:100%; text-align:center; margin-top:20%; z-index:999;}
    .alertBg{ position:absolute; width:100%; height:100%; background:#000; opacity:0.7; z-index:99;}
    </style>
    <div class="alertDiv">
        <div class="alertCon">
            <img src="QQ截图20170306172127.png" />
        </div>
        <div class="alertBg"></div>
    </div>
    
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    <p>Body内容</p>
    </body>
    </html>
  • 相关阅读:
    php单元测试
    git配置本地环境(phpstudy/tortoisegit/git等)
    xp/win7中系统安装memcached服务,卸载memcached服务,以及删除memcached服务
    memcached装、启动和卸载
    如何安装memcached
    三元运算符、逻辑运算符
    移动端页面怎么适配ios页面
    javascript正则表达式——元字符
    一个div添加多个背景图片
    GNU Screen使用入门
  • 原文地址:https://www.cnblogs.com/hwaggLee/p/6554552.html
Copyright © 2011-2022 走看看