zoukankan      html  css  js  c++  java
  • div非弹出框半透明遮罩实现全屏幕遮盖css实现

    IE浏览器下设置元素css背景为透明:

    background-color: rgb(0, 0, 0);  
    filter: alpha(opacity=20);  

    非IE浏览器下设置元素css背景为透明:

     

    兼容各类浏览器设置css背景为透明办法,即两者合并设置css:

     (ie 不支持 rgba,所以rgba不会起作用)

    background-color: rgb(0, 0, 0);  
    filter: alpha(opacity=20);  
    background-color: rgba(0, 0, 0, 0.2);  

    另:RGB与16进制色互转网站:http://11.1m86.com/

    1.弹出框默认状态下是隐藏的,当点击弹出按钮时,显示该弹出框,如下:

    <div class="modal" style="display: none;">  </div>

    2.控制弹出框显示的遮罩层CSS(遮罩整个屏幕,即添加一个灰色背景遮罩层)如下:

    复制代码
    .modal {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        outline: 0;
        -webkit-overflow-scrolling: touch;
        background-color: rgb(0, 0, 0);  
        filter: alpha(opacity=60);  
        background-color: rgba(0, 0, 0, 0.6); 
        z-index: 9999;
    }
  • 相关阅读:
    java7或java8新特性
    反射中,Class.forName和ClassLoader区别
    &和&&的区别
    JAVA时区问题总结
    索引失效原因及解决索引失效方法
    索引失效的7种情况
    MySQL Explain详解
    java switch
    java 生成注释文档
    spring 获取配置文件的值
  • 原文地址:https://www.cnblogs.com/xiaoleiel/p/8300989.html
Copyright © 2011-2022 走看看