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>

镂空遮罩层效果如图

css实现缕空遮罩层_第1张图片

使用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

感谢阅读,欢迎评论^-^

打赏我吧^-^

你可能感兴趣的:(CSS)