解决需要透明盒子遮盖，但又要可以点击下面遮盖层下方的元素

最新推荐文章于 2024-08-29 15:27:25 发布

Dyj_zf

最新推荐文章于 2024-08-29 15:27:25 发布

阅读量144

点赞数 1

文章标签： css3 vue.js typescript Powered by 金山文档

本文链接：https://blog.csdn.net/Dyj_zf/article/details/129744058

版权

需求：做个书架的展示列表，书架上方又灯光效果，就做了个透明灯光遮盖层，但要点击下方图书

透明盒子添加pointer-events: none;解决

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Dyj_zf

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决需要透明盒子遮盖，但又要可以点击下面遮盖层下方的元素

解决需要透明盒子遮盖，但又要可以点击下面遮盖层下方的元素
复制链接

扫一扫

pointer-events: none。 "影子属性"。解决遮罩层下面图片或文字超链接无法选中执行功能

liu__xi__的博客

04-17

435

pointer-events: none 今天又发现了一个神奇的“影子”属性：pointer-events: none 为什么理解为影子属性呢？因为pointer-events: none 的作用是让元素实体 “虚化，简单的理解为一个影子，高大上一点就是海市蜃楼，看得见却摸不着。今日份踩坑：给盒子写遮盖层时，下方的图片超链接被遮盖层挡住了，功能无法实现，想通过遮盖层点击实现跳转功能： bod...

元素圆角与内部滚动条的矛盾

前端向朔

09-23

1756

文章目录概述元素圆角与滚动条方案一方案二方案实现自定义滚动条扩展遗留问题概述我们在写 web 页面的时候，除了页面原生的滚动条，比如 HTML 的滚动条，BODY 的滚动条之外，还有一种比较常见的滚动条，那就是元素内部滚动条，我们在利用元素内部滚动条的时候会遇到什么问题呢，我们如何自定义滚动条。元素圆角与滚动条比如迅雷客户端，除了最右边的滚动条是页面滚动条，其他两个都是元素内部滚动条。 ...

参与评论您还未登录，请先登录后发表或查看评论

如果一个游戏上面加一个透明层，js能不能实现点击透明层的任意点而正常玩游戏...

weixin_33991418的博客

04-07

103

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.min.js"></script> </he...

css点击穿透，实现能够点击图层以下的按钮

q12as的博客

01-13

724

pointer-events: none;点击穿透能够实现对下层元素的操作

Css 将div设置透明度，并向上移50px,盖住上面的元素一部分

u012632105的博客

09-03

886

首先，将div的opacity属性设置为小于1的值，比如0.5，这样就可以设置透明度了。其次，将div的position设置为relative，然后再将它向上移动50px，即可盖住上面的元素一部分。需要注意的是，这种方式盖住的是上方的元素的一部分，而不是完全遮挡。同时，如果上方的元素有自己的背景色或背景图，可能会导致底部的div显示不完整，需要注意相关的样式设置。可以使用CSS中的opacity和position属性来实现。

CSS如何设置透明

热门推荐

wzh1593185的博客

06-29

1万+

前端必看css设置透明度的几种常用的方法

Vue项目实现折叠，下面半透明的效果

weixin_48618258的博客

09-22

588

Vue实现折叠下面半透明效果

vue 解决position:fixed 遮盖下方元素问题

weixin_40425415的博客

12-23

8443

方法1：下方的元素第一个设置 margin-top为fixed元素的高度即可。方法2：在fixed元素后添加一个空的div盒子，并将高度设置为fixed元素的高度。延伸扩展：如果fixed高度不确定，该如何处理？需要动态获取盒子高度并监听其变化，然后动态设置元素的style。 <div> <div id="header" style="position: fixed"> //设置fixed的元素 </div...

绝对定位元素挡住下方元素点击解决办法

吐故纳新

11-12

3439

pointer-events:none;表示它将捕获不到任何点击，而只是让事件穿透到它的下面。 pointer-events:auto;表示鼠标不会穿透当前层,鼠标事件仍会监听这父元素，下面的子元素。 1. 外层div如果已经绝对或相对定位了（并且本层有点击事件或其他执行事件继续有效）： position: absolute; z-index:9999 pointer-events: none; 2. 内层div设置绝对定位： position: absolute; z...

css遮罩层上面的弹框里面的内容可以滑动，外面的页面不可以滑动保持之前滑动的位置不变

jiaxiaoyan127的博客

12-20

7757

前言最近做手机端用到了一个弹框里面的滑动，就是点弹框时外面一层的位置保持在之前滑动的位置，点取消滑动时恢复到之前滚动的位置不断地积累废话不多说啦。直接来看张图吧？现在开始撸代码啦！ css部分： .ruleBg{display: none} .ruleMask{ z-index:99; background: rgba(0, 0

ios 设置控制器背景半透明_iOS Modal出半透明控制器

weixin_33841498的博客

01-12

1152

在最近的开发需求里，有一个半透明的页面，从上到下弹出方式，然后在该弹出视图上再Modal和Push其他的页面，之前常规的做法是选择view添加到keyWindow上：1、如果选择View来完成，modal出一个新页面[[UIApplication sharedApplication].keyWindow addSubview:self];由于弹出视图是添加在keyWindow上，modal出的新页...

第八章运用盒子模型布局网页

2201_75876277的博客

09-19

144

文章到此一游💖😜

【Web前端实操03】利用两种方式实现一个 div 盒子半透明

qq_45498824的博客

01-15

838

通过CSS，想要实现一个div盒子半透明的效果，有两种方法，一种是通过透明属性来完成，还有一种是通过rgba最后一个属性是设置透明度的方法来搞定。

前端HTML中盒子的显隐性

个人笔记

02-21

748

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .one{ width: 600px; height: 600px; background-color: pink; /*真正控制显性和隐性的属性*/ /*hidden隐藏 vis

CSS3中的字体详解

最新发布

业精于勤荒于嬉，行成于思毁于随

08-29

802

CSS3动画——飞行的小精灵

懒羊羊大王的博客

08-25

1341

通过多层结构、渐变色、圆角、多种动画效果以及细节处理，成功地创造了一个充满活力和趣味性的飞行小精灵动画效果。

CSS3视图过渡动画

m0_46281382的博客

08-24

592

手写视图过过渡动画，讲解如何实现Element Plus和Antdesign UI两种主题切换的实现逻辑；

Vue 绘制圆形上下左右

qq_40216244的博客

08-26

175

【代码】Vue 绘制圆形上下左右。

UIView中空遮盖层，中间部分区域透明可视

06-02

您好！对于您的问题，您可以使用CAShapeLayer来创建一个空心遮盖层。具体的做法如下： 1.创建一个UIView，作为需要添加遮盖层的视图。 2.使用CAShapeLayer创建一个空心的遮盖层。 3.将CAShapeLayer添加到UIView的layer中。 4.设置CAShapeLayer的path属性，使其形成一个空心的区域。 5.设置CAShapeLayer的fillColor属性为透明，strokeColor属性为您想要的颜色。 6.设置UIView的背景色为您想要的颜色，这样就能够看到空心区域中的内容。示例代码如下： ``` // 创建需要添加遮盖层的视图 UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)]; view.backgroundColor = [UIColor whiteColor]; // 创建CAShapeLayer并添加到UIView的layer中 CAShapeLayer *maskLayer = [CAShapeLayer layer]; [view.layer addSublayer:maskLayer]; // 创建一个矩形，表示需要空心的区域 CGRect rect = CGRectMake(50, 50, 100, 100); // 创建一个圆形，表示需要透明的区域 UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(75, 75, 50, 50)]; // 创建一个路径，表示空心的区域 UIBezierPath *path = [UIBezierPath bezierPathWithRect:rect]; [path appendPath:circlePath]; [path setUsesEvenOddFillRule:YES]; // 设置CAShapeLayer的属性 maskLayer.path = path.CGPath; maskLayer.fillRule = kCAFillRuleEvenOdd; maskLayer.fillColor = [UIColor clearColor].CGColor; maskLayer.strokeColor = [UIColor redColor].CGColor; maskLayer.lineWidth = 2; // 将UIView添加到父视图中 [self.view addSubview:view]; ``` 这样就可以创建一个空心的遮盖层，其中圆形区域是透明的，可以看到UIView的背景色。