专栏首页前端说吧mask遮罩层的华丽写法

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);
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS-运动基础——案例应用:淡入淡出效果

    xing.org1^
  • css笔记 - transform学习笔记(二)

    属于2D/3D上的转换、变形效果。他不是一个动画,他就是变形。比如正方形变平行四边形,再变圆形。都是形状变成另一个形状。

    xing.org1^
  • CSS-自定义高度的元素背景图如何自适应以及after伪类在ie下的处理

    xing.org1^
  • 前端学习数据结构与算法系列(二):链表与数组的基础知识

    由于数据是分散存储,查找数据时,只能从第一个数据开始,顺着指针的指向一一往下访问(顺序访问)。

    一只图雀
  • hdu---(5038)Grade(胡搞)

    Grade Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 262144/262144 K (J...

    Gxjun
  • 一周简报 | Talkingdata投资市场研究公司Newzoo,打造国际化精细分析

    编辑导语 UCloud U市场 镜像2.0时代震撼发布;美洽SDK:新增来源分布报表下钻分析功能;腾讯云作为钻石级赞助商,亮相第五届全球移动游戏大会;Talki...

    BestSDK
  • PHP制作 微信、支付宝、QQ支付多合一收款二维码

    游魂
  • 《MongoDB极简教程》第二章 MongoDB 基本命令(Shell)

    MongoDB的所有请求都以命令的形式发出,支持的命令列表参考Database Commands

    一个会写诗的程序员
  • 头条二面问网络传输如何保证可靠性?我差点翻车了

    如果你还在参加春招,不管是社招还是校招。龙叔都想唠叨几句,今年整体经济形势很差,可能有些人还没意识到有多差,但我相信很多人都能感受到。很多公司入不敷出,基本都在...

    龙跃十二
  • Hacker基础之Linux篇:基础Linux命令十一

    上节我们说到了netstat这个用于查看网络状态的命令,现在我们介绍其他查看网络状态的命令

    用户1631416

扫码关注云+社区

领取腾讯云代金券