前端杂谈 · Web

[设计焦点]前端页面遮罩层实现方法

•̀.̫•́✧ · 4月17日 · 2020年 · 本文355字 · 阅读1分钟84

遮罩层的应用场景:我们在网页中点击在线客服、登录框、反馈工单、弹出框提示框、二维码等图片后,原有的页面信息会被遮挡虚化,这样会聚焦显示某些信息,使用户的关注点集中在页面的某个点上,类似局部照明聚光灯的感觉。这就是使用遮罩层的作用。

就拿本站的登录功能来举例:

[设计焦点]前端页面遮罩层实现方法-歪?是3.1415926吗

遮罩层的使用也是为了优化用户的体验。

简单代码

<div class="masked"></div>
.masked {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0,0.75);
    z-index: 99999;
    display: none;
}

使用固定定位position: fixed相对于浏览器窗口进行定位。 这样遮罩层不会随着页面的滑动而看不见,而会随着页面滚动一起滚动。

0 条回应