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. js css html加载顺序

    1.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控.正常的网页加载流程是这样的.浏览器一边下载HTML网页,一边开 ...

  2. PHPStorm 最新版下载

    2019最新版phpstorm   包含其他版下载地址   https://www.jetbrains.com/phpstorm/download/other.html

  3. IDEA工具java开发之 常用窗口

    ◆project窗口  ◆structure窗口  ◆todo窗口  ◆favorites窗口  ◆termimal窗口 此窗口默认打开的时cmd,所以才这里可以操作任何cmd可以操作的内容, 一般次 ...

  4. 废旧手机改造之给你的手机安装win10系统

    最近又开始琢磨把我这个即将退出的二手手机再利用一下 发现了一个不错的软件 先上图 是不是感觉逼格很高啊 点击下面链接即可下载使用 https://www.lanzous.com/i4gpsib 欢迎交 ...

  5. Lobooi第二次作业：熟悉使用工具

    第二次作业 GIT地址 https://github.com/Lobooi//AchaoCalculator GIT用户名 Lobooi 学号后五位 24235 博客地址 https://home.c ...

  6. Dynamics 365 CRM 在 Connected Field Service 中部署 IoT Central （三）- 发送 work order 和 booking 信息给 IoT Central

    首先, 我们可以打开IoT alert, 并且点击上的 create a flow. 接下来,我们使用微软准备好的模板:Sample Contoso- When a work order is cre ...

  7. airtest通过包名直接打开app的方法

    工具提供直接打开APP的函数 #输入微信包名,打开微信 start_app("com.tencent.mm")

  8. libc.so.6修改链接指向后导致系统无法使用的原因及解决方法

    https://www.cnblogs.com/weijing24/p/5890031.html http://man.linuxde.net/ldconfig

  9. Spring注解开发系列Ⅳ --- 属性赋值

    在Spring框架中,属性的注入我们有多种方式,我们可以通过构造方法注入,可以通过set方法注入,也可以通过p名称空间注入,方式多种多样,对于复杂的数据类型比如对象.数组.List集合.map集合.P ...

  10. Springboot | Failed to execute goal org.springframework.boot:spring-boot-maven-plugin

    案例 今天搭建spring boot 环境时,使用mvn install ,出现Failed to execute goal org.springframework.boot:spring-boot- ...