Div实现页面的遮罩

之前没动手搞过，项目有个需求刚好可以用到，就想着去试下，结果发现自己都理解的有问题了。

遮罩的实现是使用opacity或者IE下的filter滤镜来设置透明度的，而且一个div必须要设置一个背景色，不然看不到效果，
通常的模态窗是使用毛玻璃效果来实现的

毛玻璃的示例代码，兼容浏览器
background-color: rgba(0,0,0,0.3);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
-o-filter: blur(2px);
filter: blur(2px);

遮罩的示例代码
-moz-opacity: 0.8; //火狐的旧版
opacity:.80; //当前主流浏览器的新版
filter: alpha(opacity=80); //IE的旧版
//还有Opera和safri没列出，网上都有，需要再查

使用DIV实现页面的遮罩效果的更多相关文章

  1. js方式实现页面加遮罩效果

    有时候在页面上执行查询的时候由于数据量很大,需要较长时间,所以就需要在等待结果期间不可以操作页面,那么可以使用如下代码给页面添加遮罩效果: $.messager.progress({ title: ' ...

  2. js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果

    1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...

  3. CSS3学习笔记（5）—页面遮罩效果

    今天把页面遮罩的效果发一下,之前遮罩都是用JS实现的,忽然发现CSS3里面的box-shadow属性除了做立体阴影外,还可以做页面的遮罩. 下面来看一下完成的动态效果: 从上图可以看出,就是当鼠标悬浮 ...

  4. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

  5. Html遮罩效果

    遮罩效果 <!DOCTYPE html> <html> <head> <title>DIV CSS遮罩层</title> <scrip ...

  6. CSS遮罩效果和毛玻璃效果

    前面的话 本文将详细介绍CSS遮罩效果和毛玻璃效果 遮罩效果 普通遮罩 一般地,处理全屏遮罩的方法是使用额外标签 <style>.overlay{ position:fixed; top: ...

  7. jquery 半透明遮罩效果 小结

    最近偏离学术的道路越来越远了!! 今天要小结的是实现一个半透明遮罩效果.点击页面上的一个按钮,立即在屏幕的正中央显示某个部件,并且在这个部件之外的区域像是蒙上了一层半透明的遮罩.点击遮罩区域,该正中央 ...

  8. div+css页面右侧底部悬浮层

    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  9. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

随机推荐

  1. springboot +fastdfs 上传文件到到云服务器

    fastdfs在云服务器的搭建和配置:https://blog.csdn.net/qq_41592652/article/details/104006289 springboot结构如下: appli ...

  2. 2018 CCPC 网络赛

    The Power Cube is used as a stash of Exotic Power. There are n cities numbered 1,2,…,n where allowed ...

  3. day6 相对定位：position:relative

    相对定位:position:relative 特点:a.相对于自己原来位置的定位,以自己的左上角为基准. b.相对定位原来的位置仍然算位置,不会出现浮动现象. 以下为初始位置:(可以看出设置margi ...

  4. 20190918Java课堂记录

    1. EnumTest.java public class EnumTest { public static void main(String[] args) { Size s=Size.SMALL; ...

  5. Numpy科学计算从放弃到入门

    目录 一.什么是Numpy ndarray对象 相关文档 二.如何创建数组 三.如何访问数组 下标索引 切片索引 布尔型索引 整数索引 方形索引 四.如何做算数运算 五.如何使用统计函数 六.数组转置 ...

  6. 【Oracle】内连接、外连接、（+）的使用

    表各有A, B两列 A B 001 10A 002 20A A B 001 10B 003 30B A B 001 10C 004 40C 连接分为两种:内连接与外连接. A．内连接 内连接,即最常见 ...

  7. TryCatchFinallyReturn

    public class TryCatchFinallyReturnTest { public int test(){ try { int i=1; int j=2/i; return 1; }cat ...

  8. HTML5 App商业开发实战教程 基于WeX5可视化开发平台

  9. 夜晚 十点 React-Native 源码 暴力畜 系列

    百度 上 给的 关于 React-Native 的 排名 前三 继续 跟

  10. 深入理解大数据之——事务及其ACID特性

    目录 事务简介 事物的定义 事务的目的 事务的状态 事务的ACID属性 ACID简介 原子性(Atomicity) 一致性(Consistency) 隔离性(Isolation) 持久性(Durabi ...