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. 小白学Java:迭代器原来是这么回事

    目录 小白学Java:迭代器原来是这么回事 迭代器概述 迭代器设计模式 Iterator定义的方法 迭代器:统一方式 Iterator的总结 小白学Java:迭代器原来是这么回事 前文传送门:Enum ...

  2. JDK 和JRE区别

    JDK,开发java程序用的开发包,JDK里面有java的运行环境(JRE),包括client和server端的.需要配置环境变量.... JRE,运行java程序的环境,JVM,JRE里面只有cli ...

  3. Spring(二)核心容器 - 简介 、BeanFactory、ApplicationContext

    目录 前言 1.容器简介 2.容器的结构 2.1 BeanFactory 2.2 ApplicationContext 2.2.1 ConfigurableApplicationContext 2.2 ...

  4. Mysql.复选条件的查询

    场景:有筛选条件 联盟:1.复联 2.正义联盟 3.猛禽小队,条件可多选,求查询结果. name league 飞人 复联,正义联盟 黑人 复联,正义联盟,猛禽小队 打手枪的男人 复联,猛禽小队 深井 ...

  5. java 方法定义 调用

    一.定义 格式: 修饰符 返回值类型 方法名(参数){ return } 相比之下python方法的定义简单多了 public static 是修饰符 二.调用 方法名(); 注意:要在main方法中 ...

  6. Zero down time upgrade with OGG -from 11g to 12c.

    High level steps upgrade from 11g to 12c database: 1)    Check network between source and target. 2) ...

  7. 痞子衡嵌入式:语音处理工具pzh-speech诞生记(2)- 界面构建(wxFormBuilder3.8.0)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是语音处理工具pzh-py-speech诞生之界面构建. 之前痞子衡设计过一个串口调试助手pzh-py-com,也专门写过一篇关于其界面构 ...

  8. 【Java并发基础】Java线程的生命周期

    前言 线程是操作系统中的一个概念,支持多线程的语言都是对OS中的线程进行了封装.要学好线程,就要搞清除它的生命周期,也就是生命周期各个节点的状态转换机制.不同的开发语言对操作系统中的线程进行了不同的封 ...

  9. Add Scaffold

  10. allegro设置内存分配器的一个坑

    看过<游戏引擎架构>后我开始对内存的分配问题关注,一直想用内存分配器来管理游戏的内存.前两天发现了有许多第三方内存分配器可以用.最后挑中了nedmalloc,这个库也是ogre所使用的,测 ...