css实现缕空遮罩层
最新更新时间：2019年05月13日13:41:01
《猛戳-查看我的博客地图-总有你意想不到的惊喜》
本文内容：页面镂空遮罩层、页面镂空遮罩引导层、图片镂空遮罩
遮罩层实现点击穿透的方案
- 当点击遮罩层时需要触发下层元素的click事件，给遮罩层添加
#mask{pointer-events: none;}样式即可，详情请参考文本参考资料
常规遮罩层
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>Titletitle><style>.mask{position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: rgba(0,0,0,0.4);display: flex;justify-content: center;align-items: center;z-index: 3;}.mask{position:fixed;top : 0;left : 0;bottom : 0;right : 0;background:rgba(0,0,0,.5); /*background:hsla(0,100%,80%,0.5)*//*background:#000; opacity:0.5; */}//模糊效果 毛玻璃效果.blur{-webkit-filter: blur(5px); /* Chrome, Opera */-moz-filter: blur(5px);-ms-filter: blur(5px); filter: blur(5px);}
style>
head>
<style>style>
<body><div class='mask'>div>body>
html>
镂空遮罩层效果如图
使用box-shadow实现镂空遮罩引导层效果
优点：
- 圆角轻松实现；
- box-shadow 不会影响元素位置，定位只需要根据 content 的位置写。
缺点：阴影可视区域无法触发click事件，因此，当点击蒙层任意区域，无法隐藏。
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>Titletitle><style>.guide{position: absolute;z-index: 2;top: 0px;left: 50%;transform: translateX(-50%);width: 50px;height: 50px;border-radius: 50px;border: 3px solid #2353FA;box-shadow: 0px 0px 0px 1000px rgba(0,0,0,.75);box-sizing: border-box;}style>
head>
<style>style>
<body><div class='guide'>div>body>
html>
使用border实现镂空遮罩引导层效果
缺点：代码量大
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>Titletitle><style>.guide{position: absolute;z-index: 2;.opacityEle{border: 700px solid rgba(0,0,0,0.75);width: 50px;height: 50px;position: relative;top: -700px;left: -538px;border-radius: 50%;.ele{width: 50px;height: 50px;border: 3px solid #0B6EFF;border-radius: 25px;box-sizing: border-box;}}}style>
head>
<style>style>
<body><div class='guide'><div class='opacityEle'><div class='ele'>div>div>
div>body>
html>
参考资料
- pointer-events - CSS（层叠样式表） | MDN
感谢阅读，欢迎评论^-^
打赏我吧^-^
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！