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. graphviz 的使用教程

    node 节点属性如下 : Name Default Values color black node shape color comment   any string (format-dependen ...

  2. 1、Vue 实战-入门篇

    先决条件:需要 Node.js . npm 基础. 如果没有基础看先看下面简单的两点介绍. 1.npm 命令介绍. 1.所有命令  -h 可以查看.也可以从官网查 docs,结果如下. --help ...

  3. springboot2 + grpc

    项目情况: springboot: 2.2.2 grpc-spring-boot-starter: 2.6.1.RELEASE 项目目录: mypro: - person  - grpc服务端 - l ...

  4. python中end=''

    end = ''  用于连接下一条的print输出内容 效果图: 代码: # end='' 用于连接下一条输出语句 print('哈哈哈') print('嘻嘻嘻') print('\n\n') pr ...

  5. Java配置文件读取中文乱码问题

    背景 这是我之前在做的用友服务对接开发,昨天领导拿给财务测试时告诉我有乱码,当时我第一想法是用友那边的编码格式有问题,因为还在做其他任务,我说等问一下用友他们用的什么编码格式我们这边改一下,然后今天早 ...

  6. mysql高级复习

    MySQL官方对索引的定义为:索引(Index)是帮助MySQL高效获取数据的数据结构.可以得到索引的本质:索引是数据结构,可以简单理解为“排好序的快速查找数据结构”. 数据本身之外,数据库还维护着一 ...

  7. Go 每日一库之 viper

    简介 上一篇文章介绍 cobra 的时候提到了 viper,今天我们就来介绍一下这个库. viper 是一个配置解决方案,拥有丰富的特性: 支持 JSON/TOML/YAML/HCL/envfile/ ...

  8. git 多人协同开发

    一.允许他人操作程序(两种方式) 1.添加合作者 2.创建组织 二.分支 每个开发者创建一个属于他们的dev分支 三.合并规则 1.一起合并(代码会出现冲突) 2.尽量缩短合并的周期

  9. SpringMVC简单使用教程

    一.SpringMVC简单入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 <!--conf ...

  10. SpringBoot配置国际化

    1).国际化 1).编写国际化配置文件: 2).使用ResourceBundleMessageSource管理国际化资源文件 3).在页面使用fmt:message取出国际化内容 步骤: 1).编写国 ...