web页面实现镂空遮盖层效果

时间: 2019-07-12阅读: 253标签: 效果


上图是“QQ截图”选择区域时的画面,可以看到除了中间框选的部分,其他区域被一层半透明层覆盖(backdrop),这种效果不知道专业叫法,这里称呼它“镂空遮盖层”。实际业务需求中倒是不多见,比较常见的是“页面上的新手引导”,“视频网站的关灯模式”等用到这种效果,通用简单的做法是将内容元素的z-index设置大于遮盖层的,使该元素显示在遮盖层上面。接下来分享下其他的方法,可能对某些特殊场景有用。

以下介绍的方法有:通过多个DIV拼接,单个DIV利用CSS的属性border, outline, box-shadow和混合模式mix-blend-mode来实现,下面分别从视觉动作来说明。


视觉

首先,先用样式实现内容上覆盖一层半透明遮盖,其中某个区域镂空。


DIV拼接

最原始的方法,围着镂空区域拼接4个div,拼接的方式很多,比如上面的图中用了不同颜色来表示4个div。

<div class="box">
  <div class="text"></div>
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
  <div class="item-4"></div>
</div>

<style>
.item-1, .item-2, .item-3, .item-4 {
  position: absolute;
}
.item-1 {
  top: 0; left: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 450; height: 100px;
}
.item-2 {
  top: 0; left: 450; right: 0;
  height: 300px;
  background: rgba(0, 0, 0, 0.5);
}
.item-3 {
  top: 300px; left: 150px; bottom: 0; right: 0;
  background: rgba(0, 0, 0, 0.5);
}
.item-4 {
  top:100px; left: 0; bottom: 0;
  width: 150px;
  background: rgba(0, 0, 0, 0.5);
}
</style>

实例:https://jsfiddle.net/0ast5u2j/

优点是兼容性好,缺点是要用多个DOM元素去构造遮盖层,计算麻烦,并且镂空区域只能是矩形。

border

盒模型包括了content和border,可以用content表示镂空区域,用border表示遮盖层,并且通过border-width来定位镂空区域的位置。和上面的方法有相似之处。

<div class="box">
  <div class="text"></div>
  <div class="rect-border"></div>
</div>

<style>
.rect-border {
  position: fixed;
  top: 0; left: 0;
  width: 300px;
  height: 200px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.5);
  border-top-width: 100px;
  border-right-width: calc(100vw - 450px);
  border-bottom-width: calc(100vh - 300px);
  border-left-width: 150px;
}
</style>

实例:https://jsfiddle.net/708vngj1/

用这种方法需要计算,有些情况还需要用到JS,并且镂空区域只能是矩形(当然在不使用渐变的情况下)。

outline

outline不占据空间,不影响本身元素和其他元素,可以通过对它设置足够大的值来作为遮盖层。

<div class="box">
  <div class="text"></div>
  <div class="rect-outline"></div>
</div>

<style>
.rect-outline {
  position: absolute;
  left: 150px;
  top: 100px;
  width: 300px;
  height: 200px;
  outline: 3000px solid rgba(0, 0, 0, 0.5);
}

实例:https://jsfiddle.net/rujLkg78/

优点简单方便,但镂空区域同样只能是矩形。

box-shadow

与outline类似,box-shadow同样不影响元素的大小位置。

<div class="box">
  <div class="text"></div>
  <div class="rect-shadow"></div>
</div>

<style>
.rect-shadow {
  position: absolute;
  left: 150px;
  top: 100px;
  width: 300px;
  height: 200px;
  border-radius: 10px;
  box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
}
</style>

实例:https://jsfiddle.net/8561js9L/

比上面一种方法好的地方是元素设置border-radius是有效的,所以镂空区域可以是圆角矩形、椭圆、圆形等。

mix-blend-mode

这是在网站https://momodel.cn/ 上看到的,利用混合模式,可以使元素与父元素叠加部分透明,摆脱了单个元素限制,使镂空区域可以更自由,做更复杂的图形,比如对话气泡框。

<div class="box">
  <div class="text"></div>
  <div class="overlay">
    <div class="spoltlight">
    </div>
  </div>
</div>

<style>
.overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 99999;
  background-color: rgba(0, 0, 0, 0.5);
  mix-blend-mode: hard-light;
  pointer-events: auto;
}
.spoltlight {
  position: absolute;
  left: 150px;
  top: 100px;
  width: 300px;
  height: 200px;
  border-radius: 10px;
  background-color: gray;
}

.spoltlight::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 50px;
  border: 15px solid transparent;
  border-top-color: gray;
}
</style>

实例:https://jsfiddle.net/bxjo306z/


其他

其他比如使用Canvas和SVG比较麻烦,就不过多介绍了。
Canvas实例:https://jsfiddle.net/3dbcvLp2/
SVG实例:https://jsfiddle.net/6wvdja2h/


动作

很多场景下,还需要对镂空区域下的DOM进行点击、选择等操作。

DIV拼接的方法,镂空区域本来就是空的,所以可以直接对下面的DOM操作。

其他方法,因为有真实DOM覆盖在内容上面,所以就要用到pointer-events:none,这样鼠标事件可以“穿透”该元素作用于下面的内容上。

大多数场景需要阻止操作遮盖部分下面的DOM,只对镂空部分进行“穿透”,所以不能直接对镂空遮盖层设置pointer-events:none,应该在鼠标移动到镂空区域时设置pointer-events:none,离开镂空区域设置pointer-events:auto。注意的是不能在镂空遮盖层上监听mosuemove,因为当它被设置为pointer-events:none时,就无法监听了。
https://jsfiddle.net/02e64ndr/

对于outlinebox-shadow,因为它们本身就不占据空间,鼠标事件对它们是没有效果的,自带“穿透”效果,所以除了要对镂空遮罩层设置pointer-events:none,还需要再覆盖一层透明的遮盖层,同样监听父级容器的mousemove事件,动态的对该透明层设置pointer-events
https://jsfiddle.net/4dfagcmr/

混合模式的方法,原以为通过监听镂空元素的mouseenter和mouseleave来控制pointer-events就可以了,但同样当pointer-events:none时无法监听鼠标事件,所以也只能通过鼠标坐标来判断。
https://jsfiddle.net/c1aoe0dg/

某些场景下,如仿Snipaste截图效果,需要对遮盖层下的所有元素监听鼠标进出事件,这时候对整个镂空遮罩层设置pointer-events:none就行了。

​原文:https://segmentfault.com/a/1190000020039373


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 网页游戏  直播/交友   H5游戏

链接: http://www.fly63.com/article/detial/4652

Js实现动态轮播图效果

功能描述:1.鼠标经过 左右侧箭头显示,鼠标离开 箭头隐藏2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步3.拷贝第一张图片添加到ul最后可以实现动态添加图片

vue 实现文字无缝滚动效果(从下往上滚动)

这种效果需求还是蛮多的,想起之前用JQuery实现的一个无缝滚动( 缅怀过去),是通过jq的animate方法实现的,动画结束之后就将第一个元素appendTo追加到最后面,实现循环滚动特效,不得不感叹技术更新换代真的很快。

纯CSS实现两个球相交的粘粘效果

这是一个纯粹利用CSS所做出来的效果,这个效果说穿了就是一个图像处理的原理,做法跟Photoshop里头的几乎一模一样,只是一个用图层和色版来制作,一个则是用CSS(把div当成图层思考就好了)。

html刮刮卡效果实现

公司国庆搞了个集卡、抽奖小活动。抽奖需要刮刮卡的效果,感觉 css 是实现不了。看我使用 canvas 如何实现刮刮卡效果。clearRect 这是我第一个找到的 API,作用是清除一个矩形区域内的内容

css3实现半圆和圆效果

在css2中,如果需要失效一些圆角或者半圆等等效果,一般是要通过ps等软件来处理的,在CSS3中,则不需要了,只需要通过border-radius就可以实现,大大方便了开发的效率。

用CSS新属性实现特殊的图片显示效果

使用一个或多个图像相关的CSS属性(background-blend-mode, mix-blend-mode, or filter)可以实现许多特殊的图片显示效果。本文转载自Bennett Feely的个人网站,文中共列举了20种图片显示效果。

使用原生JS实现图片放大镜效果

前提先了解数学算法:求遮罩层mask宽度,大图、大图显示区、小图、遮罩层;小图是大图等比缩放的,遮罩层是大图显示区缩放的,小图/大图 = 遮罩层/大图显示区,遮罩层 = 大图显示区*(小图/大图);

CSS实现雨滴动画效果

今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的。其实就是给一张图片,做了个模糊化的效果,看起来像毛玻璃的效果

css实现中间文字,两边横线效果

vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。

纯css实现彩虹效果

实现思路:使用box-shadow画赤橙黄绿蓝靛紫7个弧形,拼接在一起;after伪元素写投影样式;彩虹和投影都有动画,用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写彩虹的样式

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全