canvas 穿透效果,canvas做网页背景无法选取后面的元素问题
遇到这个问题这里记录一下,解决方案也非常简单
-
在我们把 canvas 作为 网站的 body 背景的 时候,如果z-index 的层级没注意设计,默认情况下,canvas 会遮挡网站上的 a 链接 和一些按钮的
- 遇到这个 问题 我们只需要在 canvas 背景中添加一个css 属性:pointer-events: none
- 你可以选择后期用 js 添加,也可以在创建的 时候直接写上,如果是canvas 在本地 可以直接写上,如果是请求而来的,可以用js 给相应的 canvas 添加这一条属性
语法
- pointer-events:auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
- 默认值:auto
- 取值
- auto: 与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同
- none:元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
其他值只能应用在SVG上。
说明:
设置或检索在何时成为属性事件的target。
使用pointer-events来阻