镂空遮罩（新手指引解决方案）

1.使用svg的方式，画个圆

网上示例(遮罩图层)

.container {position: relative;.svg {position: absolute;}.rect1 {stroke:none;fill: #ccc;}.rect2 {stroke: none;fill: #ccc;mask: url(#mask3);}
}

<div class="container">   <svg class="svg" width="400" height="280">   <defs>   <mask id="mask3">   <rect x="0" y="0" width="100%" height="100%" class="rect1"></rect>   <circle id="circle1" cx="100" cy="100" r="50" style="fill: #000" />   </mask>   </defs>   <rect x="0" y="0" width="100%" height="100%" class="rect2"></rect>   </svg>   <img src="http://img6.cache.netease.com/cnews/2014/11/3/20141103100737855b7.jpg" />
</div>

可以达到效果：有遮罩层，并且镂空显示了背景图层。

缺点：不能选择镂空出来的背景图层（不能在界面上直接操作背景图层）。

2.将背景图层需要展示在最外的元素，包一个div，将这个div设置镂空样式，并且z-index大于最外蒙层

示例：（背景图层）

.btn {width: 50px;height: 40px;position: relative;z-index: 999;cursor: pointer;color: #fff;
}

<div class="container"><!-- 某需要透过遮罩层操作的元素 --><div class="btn" onclick="fun()">这是一个按钮，需要在镂空地方能够点击</div>
</div>

（遮罩图层）

/* some else */
.page-wrapper {z-index: 997;
}

<div class="page-wrapper"><!-- some else --></div>

可以达到的效果：有遮罩层、镂空显示背景图层、能够在遮罩层操作背景图层按钮等相关操作。

缺点：与背景图层耦合度高、操作元素外面包裹的div只能继承背景是css设置颜色的样式，如果内容背景是图片，则镂空层不会展示图片。

3.在背景图层需要展示在最外的元素，同级设置一个div并将这个元素背景设为透明，定位处理位置，并设置相关点击事件

示例：（背景图层）

.parent {position: relative;
}
.container {width: 100px;height: 100px;border-radius: 50%;background-color: transparent;position: absolute;z-index: 999;left: 0;right: 0;
}

<div class="parent"> <!-- 同级div --><div class="container" @click="fun"></div><!-- 某需要透过遮罩层操作的元素 --><div class="btn" @click="fun">这是一个按钮，需要在镂空地方能够点击</div>
</div>

（遮罩图层）

/* some else */
.page-wrapper {z-index: 997;
}

<div class="page-wrapper"><!-- some else --></div>

可以达到的效果：有遮罩层、近似镂空显示背景图层、能够在遮罩层操作背景图层按钮等相关操作。

缺点：与背景图层耦合度高、操作元素外面包裹的div只能继承背景是css设置颜色的样式，如果内容背景是图片，则镂空层不会展示图片，仅可纯背景色。

4.svg画图与z-index同时使用。

遮罩层使用svg画镂空图层，背景图层需要镂空出来的且有点击事件的元素设置z-index

示例：（背景图层）

.parent {position: relative;
}
.btn {position: relative;z-index: 999;
}

<div class="parent"> <!-- 某需要透过遮罩层操作的元素 --><div class="btn" @click="fun">这是一个按钮，需要在镂空地方能够点击</div>
</div>

（遮罩图层）

.container {position: relative;margin: 150px 0 0 50px;.svg {position: absolute;}.rect1 {stroke:none;fill: #ccc;}.rect2 {stroke: none;fill: #ccc;mask: url(#mask3);}
}

<div class="container">   <svg class="svg" width="400" height="280">   <defs>   <mask id="mask3">   <rect x="0" y="0" width="100%" height="100%" class="rect1"></rect>   <circle id="circle1" cx="100" cy="100" r="50" style="fill: #000" />   </mask>   </defs>   <rect x="0" y="0" width="100%" height="100%" class="rect2"></rect>   </svg>   <img src="http://img6.cache.netease.com/cnews/2014/11/3/20141103100737855b7.jpg" />
</div>

可以达到的效果：有遮罩层、镂空显示背景图层、能够在遮罩层操作背景图层按钮等相关操作，不管内容背景是图片还是文字纯颜色背景等，都能镂空点击操作。

与背景内容层耦合度小，可将口空层单独拿出来使用。

全部完整示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*,body,html {padding: 0;margin: 0;}/* 示例1 *//* .one .container {position: relative;}.one .svg {position: absolute;}.one .rect1 {stroke:none;fill: #ccc;}.one .rect2 {stroke: none;fill: #ccc;mask: url(#mask3);} *//* 示例2 *//* .two {width: 300px;height: 100%;background: #ecd4d4;}.two .container {width: 300px;height: 300px;}.two .btn {width: 50px;height: 40px;position: relative;z-index: 999;cursor: pointer;color: #fff;}.two .button {width: 50px;height: 40px;background-image: url('http://img6.cache.netease.com/cnews/2014/11/3/20141103100737855b7.jpg');background-size: cover;background-repeat: no-repeat;border-radius: 50%;}.two .page-wrapper {position: fixed;width: 300px;height: 300px;z-index: 997;left: 0;top: 0;background-color: rgba(0, 0, 0, 0.6);} *//* 示例3 *//* 假设这些宽高位置都是js算出来的 *//* .three {width: 300px;height: 100%;background: #ecd4d4;}.three .container {width: 300px;height: 300px;}.three .btn {position: absolute;z-index: 998;left: 20px;top: 100px;width: 40px;height: 40px;background: #ecd4d4;cursor: pointer;}.three .button {position: absolute;left: 20px;z-index: 999;top: 100px;}.three .page-wrapper {position: fixed;width: 300px;height: 300px;z-index: 997;left: 0;top: 0;background-color: rgba(0, 0, 0, 0.6);} *//* 示例4 *//* 假设位置都是js计算出来的 */.four .container {position: relative;background-color: thistle;width: 400px;height: 280px;background-image: url('http://img6.cache.netease.com/cnews/2014/11/3/20141103100737855b7.jpg');background-size: cover;background-repeat: no-repeat;}.four .svg {position: absolute;}.four .rect1 {stroke: none;fill: #ccc;;}.four .rect2 {stroke: none;fill: rgba(0, 0, 0, .3);mask: url(#mask3);}.four .button {position: absolute;top: 100px;left: 100px;z-index: 999;cursor: pointer;}.four .page-wrapper {position: fixed;width: 300px;height: 300px;z-index: 997;left: 0;top: 0;}</style>
</head><body><!-- 示例1 --><!-- <div class="one"><div class="container">   <svg class="svg" width="400" height="280">   <defs>   <mask id="mask3">   <rect x="0" y="0" width="100%" height="100%" class="rect1"></rect>   <circle id="circle1" cx="100" cy="100" r="50" style="fill: #000" />   </mask>   </defs>   <rect x="0" y="0" width="100%" height="100%" class="rect2"></rect>   </svg>   <img src="http://img6.cache.netease.com/cnews/2014/11/3/20141103100737855b7.jpg" />   </div></div> --><!-- 示例2 --><!-- <div class="two"><div class="container">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容，btn为需要透过遮罩层操作的元素<div class="btn" οnclick="fun()"><button class="button">按钮 </button></div></div><div class="page-wrapper"></div></div> --><!-- 示例3 --><!-- <div class="three"><div class="container">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容，btn为需要透过遮罩层操作的元素<div class="btn" οnclick="fun()"></div><button class="button">按钮 </button></div><div class="page-wrapper"></div></div> --><!-- 示例4 --><div class="four"><div class="container"><button class="button" onclick="fun()">按钮 </button><!-- 遮罩 --><div class="page-wrapper"><svg class="svg" width="400" height="280"><defs><mask id="mask3"><rect x="0" y="0" width="100%" height="100%" class="rect1"></rect><circle id="circle1" cx="100" cy="100" r="50" style="fill: #000" /></mask></defs><rect x="0" y="0" width="100%" height="100%" class="rect2"></rect></svg></div></div></div><script>function fun() {alert('点击了')}</script>
</body></html>

镂空遮罩（新手指引解决方案）相关推荐

从王者荣耀里我学会的前端新手指引
在王者的世界里,不仅仅只有快乐,还能搞学习,让你成为快乐而又富有知识的人.这其中的功臣,这不得不说的就是它的新手指引. 为什么这么说呢?我们先来看几张图. 没错,上面的就是王者荣耀的新手引导,手把手教 ...
Android自定义相机镂空遮罩
前言最近在做项目时需要自定义相机拍照,并在预览页面显示一个取景框,效果如图: 本文只讲镂空遮罩的实现,照相部分不做解释. 思路考虑到需要获取取景框的坐标信息进行裁剪,所以用自定义View实现. 实 ...
【SwiftUI模块】0007、SwiftUI新手指引-新手指示-聚光灯介绍说明
SwiftUI小功能模块系列 0001.SwiftUI自定义Tabbar动画效果 0002.SwiftUI自定义3D动画导航抽屉效果 0003.SwiftUI搭建瀑布流-交错网格-效果 0004.Sw ...
Cocos Creator Shader实现镂空遮罩
Cocos Creator Shader实现镂空遮罩前言想不到距离上一遍博客更新已经有13个月之久了,之前定下的一个月至少更新一遍早已不知什么时候抛之脑后.今天开个头,希望以后输出更多的学习总结. ...
纵剑仙界一直显示连接服务器,纵剑仙界h5新手指引老司机带你少走弯路
纵剑仙界h5新手指引,老司机带你少走弯路.新手初来乍到,不知道该做什么怎么办?别怕!让小编来手把手教你玩转纵剑仙界! 在<纵剑仙界>手游中,等级是一个非常重要的因素.除了转生.装备高阶装备 ...
vue 新手指引_精通react/vue组件设计之快速实现一个可定制的进度条组件
前言这篇文章是笔者写组件设计的第四篇文章,之所以会写组件设计相关的文章,是因为作为一名前端优秀的前端工程师,面对各种繁琐而重复的工作,我们不应该按部就班的去"辛勤劳动",而是要根 ...
VS 2019的新手指引教程（敲代码前的调试工作及使用技巧）（简单易懂）
目录前言一.VS2019的安装二.解除"scanf"的警报及"懒人"头文件包的添加三.多个程序文件的创建与运行四.VS2019的常用快捷键前言在开 ...
图片半透明圆形镂空遮罩
原文地址:CSS mask 实现鼠标跟随镂空效果_前端开发博客的博客-CSDN博客点击下方星标本公众号,实用前端技术文章及时了解偶然在某思看到这样一个问题,如何使一个div的部分区域变透明而其他部 ...
Html 点透镂空遮罩,CSS实现镂空遮罩
前一阵子面试被问题到这个问题,突然懵逼了,脑子一片空白,以前知道这种效果,比如什么值得买的改版引导页面: 当时再紧张也应该打出一种实现方法,就是什么值得买这种使用图片实现它首先加了一个半透明的黑色蒙 ...

镂空遮罩（新手指引解决方案）

1.使用svg的方式，画个圆

2.将背景图层需要展示在最外的元素，包一个div，将这个div设置镂空样式，并且z-index大于最外蒙层

3.在背景图层需要展示在最外的元素，同级设置一个div并将这个元素背景设为透明，定位处理位置，并设置相关点击事件

4.svg画图与z-index同时使用。

镂空遮罩（新手指引解决方案）相关推荐

最新文章

热门文章