半透明遮罩层覆盖整个可视区域

我们经常会遇到点击一个按钮弹出一个对话框和一个变暗的遮罩层，简单的写法只能让遮罩层覆盖浏览器的大小，那么怎么让遮罩层覆盖全部区域呢？

css代码如下：

 1 html,body {
 2     height: 100%;
 3     margin: 0;
 4     padding: 0;
 5 }
 6 .mask {
 7     height: 100%;
 8     width: 100%;
 9     position: fixed;
10     _position: absolute;
11     top: 0;
12     z-index: 100;
13 }
14 .opacity {
15     opacity: 0.3;
16     filter: alpha(opacity=30);
17     background: #000;
18 }

转载于:https://www.cnblogs.com/misaki/p/3156474.html

半透明遮罩层覆盖整个可视区域相关推荐

iOS自定义相机：带拍摄区域边框、半透明遮罩层、点击屏幕对焦、自动裁剪（含demo源码）
文章目录前言 I.案例1:加一个长方形的框框并裁剪身份证照片(无半透明遮罩层) 1.1 demo 源码 1.2 控制屏幕旋转方向 1.3 封装富文本API 1.4 设置相机预览层和证件框框的fram ...
css-实现鼠标移至图片上显示黑色半透明遮罩层，且不至于遮住图片上的超链接的方法
作为一个刚接触html和css的小白,总会遇到一些细节问题,在这里写下一个我遇到的小问题的解决方法,方便今后加深理解,更高效地学习. 一般情况下,让一个图片有超链接,可以用a标签把 img包住,但是要 ...
C#实现Winform自定义半透明遮罩层
在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Code using Sys ...
html背景图片半透明遮罩,BufferedImage在图片添加半透明遮罩层
利用BufferedImage处理图片时,例如生成海报往添加图片加文字,由于背景图颜色差异不统一,需要加入纯色半透明遮罩层后,再往上面添加文字. 以下代码演示:在图片底部加入一条高度20的半透明遮罩层 ...
CSS半透明遮罩层 and 定位
html  <div class="mask" style="display: none;"></d ...
element后台管理当navbar固定的时候,遮罩层覆盖diglog的问题
fixedHeader: true, 当固定header 遮罩层覆盖diglog 对遮罩层加属性 :modal-append-to-body="false" 将遮罩层会插入至 Di ...
dialog 弹出框，遮罩层覆盖内容
写完项目没太注意,并且情况是偶尔发生,点击dialog 的弹出框的时候,灰色遮罩层会覆盖内容上面, 这样的话可能是由于我们会发现浏览器遮罩层高于盒子遮罩层,会照成这样的问题,也有可能是我们给父元素加了 ...
iOS手持证件照相机：拍身份证裁剪大小，截图截出所需大小（带拍摄区域边框及半透明遮罩层）
文章目录引言 I.手持证件照相机 1.1 demo源码 1.2 用法 1.3 手持证件照的裁剪算法(`根据图片方向进行裁剪`) 1.4 屏幕适配 II.see also 引言需求背景人脸比对需要 ...
C#实现winform仿div+css半透明遮罩效果
本文实现在winform项目实现网页div+css关透明效果,挺帅的,在网页中要实现div的半透明遮罩层效果不难,在winform项目就不是这么容易了,下面我们来看下效果图先: 正常时: 文章来自 ...

半透明遮罩层覆盖整个可视区域

半透明遮罩层覆盖整个可视区域相关推荐

最新文章

热门文章