怎么写遮罩层 css,css案例 - mask遮罩层的华丽写法
mask遮罩蒙层使用通常的写法的bug
通常写法pug
.mask
通常写法css
.mask{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/*移动端*/
background: rgba(0,0,0,.5);
/*ie*/
background: #000;
opacity: 0.5;
filter: alpha(opacity = 0.5);
}
但是这种适用于内容小于屏幕高度的,如果内容撑出屏幕,那么css自动计算的mask的高度就有问题了,
比如这样,
正面看很ok
但是轻轻上滑。。
嘚!露怯了!
起初想的解决是,mask出现的时候不让页面滚动?
倒也不是不可以,但是万一人家刚好移动了一点点再点击调出蒙层呢?不也还是露怯么!属于治标不治本型的。
那就只能从高度上下手了
刚好页面中有计算可视化高度的,
我给mask设置style的行内高度为可视区域高度,发现也不行
那设置成body的scrollHeight呢?也不行
不知道是不是css是rem而我设置px的原因
反正都没解决
但是js动态设置高度后,我无意识的将position:absolute;改成了position:fixed;
妈耶效果好了!
起初还以为是js起作用了,还想小小开心庆祝下我的机智
后来转念一想,高度设置了下边也是露一块啊,为什么蒙层却完美贴合了呢?!
所以肯定另有玄机
我就把js删掉,发现果真对人家没什么影响,还是那么完美的贴合。
刚就改了两个地方,于是,我把目光瞄准了css
尼玛,原来就是fixed和absolute的区别啊!
好了,问题这次真的解决了,测试了很多不同分辨率都OK
.mask{
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
background: rgba(0,0,0,.5);
}
CSS创建一个遮罩层
.layer{ width: 100%; position: absolute; left:; right:; top:; bottom:; -moz-opacity:; filter: alpha( ...
页面添加 mask 遮罩层
var mask = function(){ $('
vux 中popup 组件 Mask 遮罩在最上层问题的解决
1. 问题描述:popup弹出层在遮罩层下面的 2.原因:因为滚动元素和mask遮罩层在同一级,vux框架默认把遮罩层放在body标签下的 3.解决方法:更改一下源码,把mask遮罩层放在popup同 ...
纯js制作遮罩层对话框 -- g皓皓
//本文支持js在线工具测试.转载请注明出处. < ...
LigerUI可编辑表格左下角出现白色小方块遮罩层问题解决办法
LigerUI已经研究了一段时间,总体感觉还不错,基于jQuery开发,框架提供了丰富的UI组件,尤其LigerUI表格,功能还是挺强大的 在使用LigerUI可编辑表格的时候,发现一个小小的问题 当 ...
jQuery弹出遮罩层效果完整示例
% url 'cms:add' %}">
maven包上传私服
选择需要上传的项目右键-->Run As-->Run Configurations-->Maven Buid-->右键 new -->选择 base directory- ...
怎么写遮罩层 css,css案例 - mask遮罩层的华丽写法相关推荐
- mask属性是css3的吗_CSS遮罩——如何在CSS中使用遮罩
大概一年前,我写过一篇文章介绍有关webkit中新的css技术--css滤镜,如果其他浏览器不能支持的话会,这是个麻烦. 有关于Webkit中的滤镜,大家要是感兴趣的话可以阅读<CSS3 Fil ...
- CSS奇思妙想—使用 mask 实现视频弹幕人物遮罩过滤
使用 mask 实现视频弹幕人物遮罩过滤 经常看一些 LOL 比赛直播的小伙伴,肯定都知道,在一些弹幕网站(Bilibili.虎牙)中,当人物与弹幕出现在一起的时候,弹幕会"巧妙" ...
- CSS伪类实现遮罩层效果
CSS中的伪类可以更方便的帮助我们定义过渡效果,这里,我们详细介绍一下利用:hover实现遮罩层效果.:hover是指当鼠标悬停在元素上时所发生的效果. 实现遮罩层的步骤 需要两个相等大小的元素. 两 ...
- 【CSS】mask遮罩
出于对b站视频为什么不遮挡人物的好奇,查看了相关的图片和相关文档,发现图片是类似于一个PS的遮罩层: 这张图片是怎么来的,肯定是AI识别出来然后生成的,一张图片也就一两K,一次加载很多张也不会造成很大 ...
- css——模态框【遮罩层的制作;信息层;往白色的块里添加表单】
目 录 1.遮罩层的制作 2.信息层 3.往白色的块里添加表单 1.遮罩层的制作 <!DOCTYPE html> <html lang="zh-CN"> ...
- HTML怎么制作镂空文字遮罩,用纯 CSS 实现镂空效果
背景被裁剪为文字的前景色.第一次是在 CSS-Tricks 看到的这个用法: 在 CSS-Tricks 网站上,这个玩意用得到处都是. 这样,做简单的图片背景镂空效果便不再困难了.关键代码只有几行. ...
- HTML怎么制作镂空文字遮罩,用纯CSS实现镂空效果的示例代码
近来研究了一下镂空效果. background-clip: text 背景被裁剪为文字的前景色.第一次是在 CSS-Tricks 看到的这个用法: 在 CSS-Tricks 网站上,这个玩意用得到处都 ...
- CSS遮罩——如何在CSS中使用遮罩
Css遮罩是2008年4月由苹果公司添加到webkit引擎中的.遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果. 图像是由rgb三个 ...
- php如何使用遮罩,CSS绝对定位实现窗口遮罩功能:2019年1月15日作业
CSS绝对定位实现窗口遮罩功能: 这是HTML代码部分 实例 html> 绝对定位之遮罩 用户登录窗口 用户名: 密码: 登录 运行实例 » 点击 "运行实例" 按钮查看在线 ...
最新文章
- linux 常用命令:
- 用git发patch
- JavaScript-2(数组与字符串的方法)
- 从职责归属看数据库中关系设计
- 7-20上午刷题未知点集合
- Redis 持久化策略 : RDB持久化、AOF持久化、混合持久化
- C++ 右值引用 | 左值、右值、move、移动语义、引用限定符
- Lucene提供的条件判断查询[转]
- 小米集团2021未来星专项招聘计划!
- hibernate一级缓存的源码初窥
- atitit.添加win 系统服务 bat批处理程序服务的法总结instsrv srvany java linux
- 将mysql服务从C盘(原),安装到新路径D盘下(其中的数据一并迁移)
- 老司机教你如何快速入门Linux | 小白必知
- 一些可以参考的文档集合5
- html 悬浮qq,js悬浮QQ在线客服代码(支持拖动)
- linux 文件隐藏,Linux系统怎么隐藏文件夹和文件?
- 计算机工作键是开声音的,笔记本电脑原来加声音要按两个键,现在只按一个键了,怎么调呢?...
- META-INF、WEB-INF分别是什么?
- Windows Mobile 开发常见问题集(转自zsu_darkwind的专栏)
- 给定平面上任意三个点的坐标(x​1​​,y​1​​)、(x​2​​,y​2​​)、(x​3​​,y​3​​),检验它们能否构成三角形
热门文章
- R语言window函数提取时序数据数据子集(subset):使用xts包将dataframe数据转化为时间序列数据(time series)、使用window函数从时间序列对象中提取数据子集
- Pandas获取数据列名称的列表(list):(column list)
- AttributeError: ‘FPDF‘ object has no attribute ‘unifontsubset‘
- python实现字典遍历稳定有序使用collection包OrderedDict
- 机器学习算法优缺点对比及选择(汇总篇)
- 大数据时代千帆竞发,三代测序激流勇进
- 转录组测序和RNA-seq
- Numpy与Pandas基础
- java将输出结果写入csv文件_如何在Java中将数据写入.csv文件?
- 【转载】自然语言推理介绍