html,css如何实现穿透顶层元素点击底部元素,实现水印效果,css3属性:pointer-events的妙用

300 阅读1分钟

pointer-events属性在官方中说明指定元素是否能成为鼠标事件的target,其实意思指的就是该元素是否能被选中,该属性可以用于添加系统水印效果,顶部蒙板换成透明的水印图片

演示

1.未添加蒙板

在这里插入图片描述 2.在顶层添加蒙板、遮罩,就点击不到底下按钮

在这里插入图片描述 3.给蒙板添加pointer-events:none属性后,便可以点击到底下的按钮

在这里插入图片描述