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. border-radius属性失效了Ծ‸Ծ

    .btn-circle { width: 30px; height: 30px; text-align: center; padding: 4px ; font-size: 16px; font-we ...

  2. 自定义博客cnblogs样式的必备前端小知识——css

    css样式相关小知识 文字超出一行显示省略号 overflow: hidden; /*自动隐藏文字*/ text-overflow: ellipsis; /*文字隐藏后添加省略号*/ white-sp ...

  3. FreeRTOS独立看门狗检测任务执行状态

    为了保证FreeRTOS的所有用户任务都在正常的运行,我们通过独立看门狗的形式来检测,一旦发现有某个任务长时间没有执行,看门狗就会将系统复位. 运行条件: 创建5个用户任务Task1,Task2,Ta ...

  4. 若依框架. 仿ThymeLeaf前端SelectDictLable方法

    在framework项目下新增所需服务

  5. Miller-Rabin​素数测试算法

    \(Miller-Rabin\)​素数测试 用途 判断整数\(n\)是否是质数,在\(n\)较小的情况下,可以使用试除法,时间复杂度为\(O(\sqrt n)\).但当\(n\)的值较大的时候,朴素的 ...

  6. [bzoj3527] [洛谷P3338] [Zjoi2014]力

    Description 给出n个数qi,给出Fj的定义如下: \[ F_j=\sum\limits_{i<j} \frac{q_iq_j}{(i-j)^2} - \sum\limits_{i&g ...

  7. 趣学CCNA 路由与交换

    第1章 OSI和TCP/IP 11.1 协议与协议分层 31.2 OSI参考模型 61.2.1 物理层 91.2.2 数据链路层 91.2.3 网络层 101.2.4 传输层 101.2.5 会话层 ...

  8. Ubuntu16手动安装OpenStack——keystone篇

    本博客来自于https://www.voidking.com/dev-ubuntu16-manual-openstack-keystone/ 赶紧做笔记 keystone简介 OpenStack身份识 ...

  9. 解决delete 删除sql语句,标识还保留删除之前的问题

    我有一些数据,想要删除,首先想到的是delete,但是它会保留之前的标识,后来想用truncate来进行删除,但是,它会全部删除,并且不能加条件,只能回过头使用delete,以下是解决delete删除 ...

  10. 图解kubernetes调度器SchedulerExtender扩展

    在kubernetes的scheduler调度器的设计中为用户预留了两种扩展机制SchdulerExtender与Framework,本文主要浅谈一下SchdulerExtender的实现, 因为还有 ...