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小白集合源码的学习系列:ArrayList

    ArrayList源码学习 本文基于JDK1.8版本,对集合中的巨头ArrayList做一定的源码学习,将会参考大量资料,在文章后面都将会给出参考文章链接,本文用以巩固学习知识. ArrayList的 ...

  2. 用来更新服务的bat 脚本

    net stop XK.Service echo "已停止服务,开始更新!" set /a t = echo %t% :loop 127.1 >nul set /a t = ...

  3. python列表的方法(改变原列表)

    xxx.append()      末尾添加一个元素效果图: 代码: # append() 末尾添加一个元素 my_list = ['] print('原列表:',my_list) my_list.a ...

  4. 暑假提高组集训Day1 T1

    说实话,今天的题真的有点难! ~备受打击~ 我们先来看一看第一题吧 看起来好像不太简单,其实并不难 下面来提供两种方法吧 1.做法一 //签到题 /* 那么这一题就是告诉你n个点的坐标,把它们分别放到 ...

  5. SpringCloud之Eureka(服务注册和服务发现基础篇)(二)

    一:Eureka简介 Eureka是Spring Cloud Netflix的一个子模块,也是核心模块之一.用于云端服务发现,一个基于REST的服务,用于定位服务,以实现云端中间层服务发现和故障转移. ...

  6. android:整理drawable(余下的)(三)

    前言 随着bitmapDrawabe.nithpatchDrawable 与 shapeDrawable 的整理,接下的就更加需要自己的想象设计一些东西. LayerDrawable 意思是层级性的, ...

  7. 1.Java和Python的选择

    我认为高级语言分为Java/c系列和其他. Java:1995年,让程序员设计一些大型分布式复杂应用. Python:1991年,面向系统管理.科研教育.等非程序员群体用的多. C系列语言:奠定了现在 ...

  8. Java入门 - 面向对象 - 02.重写与重载

    原文地址:http://www.work100.net/training/java-override-overload.html 更多教程:光束云 - 免费课程 重写与重载 序号 文内章节 视频 1 ...

  9. node js 爬啊爬 记录 向 Scott 致敬 不要问为什么

    更优雅的异步编程: 定向爬取 :http://www.010xww.com/list/travel.htm 上代码: 打印一下http . 嗯 http 模块加载没问题 获取一个 文章列表: 终于把人 ...

  10. GPU与CPU

    GPU与CPU CPU CPU,也就是中央处理器,结构主要包括控制器(指挥各部分工作).运算器(实现数据加工).寄存器.高缓以及数据/控制/状态总线.计算机的性能很大程度上依赖于CPU,CPU的功能包 ...