使叠加层后面的图像可点击[重复]答案

【问题标题】：Making image behind overlay clickable [duplicate]使叠加层后面的图像可点击[重复]
【发布时间】：2020-11-13 23:21:54
【问题描述】：

我创建了一个带有红色透明覆盖的 iframe。可以拖动 iframe 来旋转地球。当我使用 CSS 创建红色叠加层时，iframe 变得不可点击。我们可以做些什么来保持红色覆盖层并使其后面的 iframe 可点击吗？

 .overlay-effect {
      position: absolute; 
      width: 100%;
      height: 100%;
      border-radius:50%;
      clip-path: circle(160px at center);
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255,0,0,0.5);
      z-index: 0;
    }
    .earth {
      width:400px;
      height:400px;
      border-radius:50%;
      left: 50%;
      top:50%;
      margin-left: -200px;
      margin-top: -200px;
      padding: 0px;
      position: absolute;
      clip-path: circle(160px at center);
      
    }

 <div class="earth">earth iframe</div>
 <div class="overlay-effect">.......</div>

【问题讨论】：

尝试将pointer-events: none 添加到叠加层

标签： html css

【解决方案1】：

将pointer-events: none 添加到覆盖More on pointer events

【讨论】：

【解决方案2】：

答案是pointer-events。让我向您解释一下pointer-events 是什么。 pointer-events 属性定义了当用户点击一个元素时是否做出反应。这是您的最终代码。试试吧。还可以了解更多关于pointer-eventshere

.overlay-effect {
  position: absolute; 
  width: 100%;
  height: 100%;
  border-radius:50%;
  clip-path: circle(160px at center);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,0,0,0.5);
  z-index: 0;
  pointer-events: none;   /* Added this */
}
.earth {
  width:400px;
  height:400px;
  border-radius:50%;
  left: 50%;
  top:50%;
  margin-left: -200px;
  margin-top: -200px;
  padding: 0px;
  position: absolute;
  clip-path: circle(160px at center);
  
}


<div class="earth">earth iframe</div>
<div class="overlay-effect">.......</div>

【讨论】：