使用DIV实现页面的遮罩效果
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实现页面的遮罩效果的更多相关文章
- js方式实现页面加遮罩效果
有时候在页面上执行查询的时候由于数据量很大,需要较长时间,所以就需要在等待结果期间不可以操作页面,那么可以使用如下代码给页面添加遮罩效果: $.messager.progress({ title: ' ...
- js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果
1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...
- CSS3学习笔记(5)—页面遮罩效果
今天把页面遮罩的效果发一下,之前遮罩都是用JS实现的,忽然发现CSS3里面的box-shadow属性除了做立体阴影外,还可以做页面的遮罩. 下面来看一下完成的动态效果: 从上图可以看出,就是当鼠标悬浮 ...
- [读码][js,css3]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...
- Html遮罩效果
遮罩效果 <!DOCTYPE html> <html> <head> <title>DIV CSS遮罩层</title> <scrip ...
- CSS遮罩效果和毛玻璃效果
前面的话 本文将详细介绍CSS遮罩效果和毛玻璃效果 遮罩效果 普通遮罩 一般地,处理全屏遮罩的方法是使用额外标签 <style>.overlay{ position:fixed; top: ...
- jquery 半透明遮罩效果 小结
最近偏离学术的道路越来越远了!! 今天要小结的是实现一个半透明遮罩效果.点击页面上的一个按钮,立即在屏幕的正中央显示某个部件,并且在这个部件之外的区域像是蒙上了一层半透明的遮罩.点击遮罩区域,该正中央 ...
- div+css页面右侧底部悬浮层
效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...
- jquery制作弹出层带遮罩效果,点击阴影部分层消失
jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...
随机推荐
- C#实现EXCEL表格转DataTable
C#代码实现把Excel文件转化为DataTable,根据Excel的文件后缀名不同,用不同的方法来进行实现,下面通过根据Excel文件的两种后缀名(*.xlsx和*.xls)分别来实现.获取文件后缀 ...
- js-xlsx 一个实用的js 导出列表插件
在前端开发过程中,导出列表功能的开发无非两种,一种是有后台生成,发生给前端下载,第二种是前端进行列表的导出工作.之前接触了一种前端导出列表的插件 tableExport.js ,但是其缺点很明显,需要 ...
- 洛谷 P5424 [USACO19OPEN]Snakes
题目链接 题目描述 传说,数千年前圣帕特里克消灭了哞尔兰所有的蛇.然而,蛇们现在卷土重来了!圣帕特里克节是在每年的3月17日,所以Bessie要用彻底清除哞尔兰所有的蛇来纪念圣帕特里克. Bessie ...
- 【Java面试】java基础篇
总结个人的面试经历以及一些网上的的面试题,以供以后面试与巩固java基础. 1.String.StringBuilder和StringBuffer的区别 String用于存储不可变字符串的类,Stri ...
- 使用Async方法 Using Async Methods 精通ASP-NET-MVC-5-弗瑞曼 Listing 4-32.
- Linux网络文件共享服务之NFS
一.NFS服务简介 NFS全称network file system 网络文件系统,基于内核的文件系统,有sun公司开发,通过使用NFS,用户和程序可以像访问本地文件一样访问远端系统上的文件,它基于r ...
- 个人第4次作业:Alpha测试
这个作业属于哪个课程 课程 这个作业要求在哪里 作业要求 团队名称 CTRL-IKun 一.测试人员个人信息 姓名 王川 学号 201731021132 所在团队 CTRL-IKun 二.测试情况及结 ...
- selenium获取页面源码,判断是否存在指定内容,执行不同的操作
本案例用于解决selenium UI自动化,判断页面是否存在指定文字,执行后续不同的操作 主要用到browser.page_source 如,保存百度分享文件到自己的百度盘中,会出现文件被删除无法保存 ...
- SpringMVC 中的异常处理
目录 1.搭建编码分析 2.编写异常类 3.编写自定义异常处理器 4.在springmvc.xml中配置异常处理器 5.编写Error.jsp.index.jsp页面 6.编写collector代码模 ...
- Spring(四)核心容器 - BeanDefinition 解析
前言 在上篇文章中,我们讨论了 refresh 的前四个方法,主要是对 ApplicationContext 上下文启动做一些准备工作.原计划是对接下来的 invokeBeanFactoryPostP ...