前端点击png透明部分解决方案

2022-02-28

文章图片

看效果：点击空白区域红色1、点击实体区域红色2。分别得到颜色数据（包括透明度数据），控制台蓝色1、2。根据颜色数据即可解决png透明部分的点击问题。

让图片不能点击，分两种
【前端点击png透明部分解决方案】1. 整张图片不能点击。这个很好解决，直接用css样式进行控制即可。在目标图片上添加样式：

.targetPic{ pointer-events: none; }

2. 图片透明部分不可点击，实体部分可点击
思路：用canvas画一个同等大小、同一位置的图片。用canvas固有方法判断点击位置是否透明。

// jQuery自己引入, 也可以用js语法书写。1.png为图片资源，自己随便找一个。此处只是抛砖引玉 png图片透明区域点击解决方案* { padding: 0; margin: 0; box-sizing: border-box; }
文章图片

推荐阅读

上一篇：基于|基于 Kafka 的实时数仓在搜索的实践应用

下一篇：Spring Cloud Alibaba Nacos 的 2 种健康检查机制！