css pointer-events属性实现下面元素可点击

CSS中的pointer-events属性用于指定在何种情况下元素可以被鼠标事件所触发。该属性可以接受以下几个值：

• auto：默认值，元素的鼠标事件会触发并产生相应效果；
• none：元素不会响应鼠标事件，鼠标事件穿透元素；
• visiblePainted：元素是可见的，并响应鼠标事件，但此时鼠标限制在元素的画布中，穿透元素后不会触发子元素的鼠标事件；
• visibleFill：元素是可见的，并响应鼠标事件，但此时鼠标限制在填充区域内才会触发鼠标事件，穿透元素后不会触发子元素的鼠标事件；
• visibleStroke：元素是可见的，并响应鼠标事件，但此时鼠标限制在描边区域内才会触发鼠标事件，穿透元素后不会触发子元素的鼠标事件；
• painted：元素不会响应鼠标事件，但鼠标可以穿透元素触发子元素；
• fill：元素不会响应鼠标事件，但鼠标只能在填充区域触发子元素鼠标事件；
• stroke：元素不会响应鼠标事件，但鼠标只能在描边区域触发子元素鼠标事件；

接下来，我们来看一些具体的应用示例：

示例1：下层元素可点击

下面是一个示例代码，演示如何利用pointer-events实现下层元素可点击：

<div class="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
</div>

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.box {
  width: 100px;
  height: 100px;
  position: absolute;
  /* 确保两个盒子重叠在一起 */
  top: 50px;
  left: 50px;
}

.box1 {
  background-color: rgba(255, 0, 0, 0.5);
  /* 这里设置了pointer-events:none，使得该元素不会响应鼠标事件，
  利用该元素下层空间来触发上层元素的鼠标事件 */
  pointer-events: none;
}

.box2 {
  background-color: rgba(0, 255, 0, 0.5);
  /* 这里设置pointer-events:auto，使得该元素可以在被下层元素穿透的前提下，
  响应鼠标事件 */
  pointer-events: auto;
}

上面的代码中，box1和box2两个盒子重叠在一起，box1的pointer-events属性设置为none，表示该元素不会响应鼠标事件，但是可以被鼠标点击穿透，鼠标事件落在下方元素box2上，因此box2会响应鼠标事件。

示例2：利用pointer-events实现“背景蒙层”

下面是一个示例代码，演示如何利用pointer-events实现“背景蒙层”：

<div class="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="mask"></div>
</div>

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.box {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 50px;
}

.box1 {
  background-color: rgba(255, 0, 0, 0.5);
}

.box2 {
  background-color: rgba(0, 255, 0, 0.5);
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 这里设置了pointer-events:none，使得mask元素不会响应鼠标事件，
  背景蒙层的目的是于box1和box2元素进行隔离 */
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.5);
}

上面的代码中，box1和box2两个盒子都拥有自己的背景颜色，通过mask元素的背景颜色，实现了对两个盒子的背景蒙层，避免了两个元素的颜色叠加在一起，影响原有的效果。并且设置了mask的pointer-events:none，使得mask不会响应鼠标事件，实现了背景蒙层不会干扰box1和box2元素的鼠标事件响应。

以上是利用pointer-events属性实现下层元素可点击的完整攻略以及两个具体示例说明。