css如何实现缕空遮罩层

　　介绍

小编给大家分享一下css如何实现缕空遮罩层,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

常规遮罩层

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　& lt; head> 　　,,,& lt; meta  charset=癠TF-8"比; 　　,,,& lt; meta  name=皏iewport",内容=翱矶?设备宽度,初始=1,最大范围=1,最小规模=1,user-scalable=no"比; 　　,,,& lt; title> Title 　　,,,& lt; style> 　　,,,,,,,.mask { 　　,,,位置:绝对; 　　,,,宽度:100%; 　　,,,身高:100%; 　　,,,:0; 　　,,,左:0; 　　,,,背景:rgba (0, 0, 0, 0.4); 　　,,,显示:flex; 　　,,,justify-content:中心; 　　,,,对齐项目:中心; 　　,,,z - index: 3; 　　,,} 　　.mask{才能 　　,,:固定; 　　,,,,,top ,,,,,, 0; 　　,,,,,left ,,,:, 0; 　　,,,,,bottom ,:, 0; 　　,,,,,right ,,:, 0; 　　,,,,,背景:rgba (0, 0, 0, 0。5),, 　　,,,,,/*背景:hsla (0100%、80%、0.5) */,,,,,/*背景:# 000;,不透明度:0.5;*/,,}//才能模糊效果,毛玻璃效果 　　.blur{才能 　　,,,-webkit-filter:模糊(5 px);,/*, Chrome, Opera  */,,,-moz-filter:模糊(5 px); 　　,,,-ms-filter:模糊(5 px);,,,, 　　,,,过滤器:模糊(5 px); 　　,,} 　　& lt;/style> 　　& lt;/head> 　　& lt; style> 　　 　　& lt;/style> 　　& lt; body> 　　 　　& lt; div 类=& # 39;面具# 39;祝辞& lt;/div> 　　 　　& lt;/body> 　　& lt;/html>

镂空遮罩层效果如图

css如何实现缕空遮罩层

<强>使用不必实现镂空遮罩引导层效果

优点:

<李>

圆角轻松实现;

<李>

不必不会影响元素位置,定位只需要根据内容的位置写。

缺点:阴影可视区域无法触发点事件,因此,当点击蒙层任意区域,无法隐藏。

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　& lt; head> 　　,,,& lt; meta  charset=癠TF-8"比; 　　,,,& lt; meta  name=皏iewport",内容=翱矶?设备宽度,初始=1,最大范围=1,最小规模=1,user-scalable=no"比; 　　,,,& lt; title> Title 　　,,,& lt; style> 　　,,,,,,,.guide { 　　,,,,,位置:,绝对; 　　,,,,,z - index:, 2; 　　 　　,,,:0 px; 　　,,,,,左:,50%; 　　,,,,,变换:,translateX (-50%); 　　,,,,, 　　,,,,,宽度:,50 px; 　　,,,,,身高:,50 px; 　　,,,,,这个特性:,50 px; 　　,,,,,边界:,3 px  solid  # 2353 fa; 　　,,,,, 　　,,,,,不必:,0 px  0 px  0 px  1000 px  rgba(0, 0, 0,综合成绩); 　　,,,,,box-sizing:, border-box; 　　,,,} 　　,,,& lt;/style> 　　& lt;/head> 　　& lt; style> 　　& lt;/style> 　　& lt; body> 　　& lt; div 类=& # 39;指南# 39;祝辞& lt;/div> 　　& lt;/body> 　　& lt;/html>

<强>使用边界实现镂空遮罩引导层效果

缺点:代码量大

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　& lt; head> 　　,,,& lt; meta  charset=癠TF-8"比; 　　,,,& lt; meta  name=皏iewport",内容=翱矶?设备宽度,初始=1,最大范围=1,最小规模=1,user-scalable=no"比; 　　,,,& lt; title> Title 　　,,,& lt; style> 　　,,,,.guide { 　　,,,,,位置:,绝对; 　　,,,,,z - index:, 2; 　　,,,,,.opacityEle { 　　,,,,,,,边界:,700 px  solid  rgba (0, 0, 0, 0.75); 　　,,,,,,,宽度:,50 px; 　　,,,,,,,身高:,50 px; 　　,,,,,,,位置:,相对; 　　,,,,,,,:,-700 px; 　　,,,,,,,左:,-538 px; 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

css如何实现缕空遮罩层