单击使用混合混合模式的'hole'剪切

Question

这看起来应该是可能的，但是解决方案使我呆了太久了。您可以在使用Mix-Blend模式的可滚动Div中切开的孔中揭示的背景中单击链接吗？我已经尝试了pointer-events:none的通常技巧，但是由于"孔"并不是真正透明的，所以这不起作用，也可能是因为背景实际上是两个级别。

到目前为止，这是我的代码：

<div style="height:400px;width:300px;margin:0 auto;background-image: repeating-linear-gradient(45deg, white 0px,#ebebeb 60px);border:1px solid grey;overflow:scroll;position:relative;">
  <div style="padding:20px"><span>
        lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor 
      </span>
    <br>
    <br>
    <a href="http://www.stackoverflow.com">Stack Overflow</a>
  </div>
  <div style="height:100%;width:100%;background:white;mix-blend-mode:hard-light;position:absolute;top:0;left:0;overflow:scroll">
    <div style="height:300px"></div>
    <div style="width: 90%;height: 50px;margin: 0 auto 0;border: solid 1px red;border-radius: 10px;background:grey;pointer-events:none;"></div>
    <div style="height:2000px"></div>
  </div>
</div>

如果您滚动内容，您会看到背景内容来查看 - 带有链接 - 但是我无法确定如何使链接可单击（如果可能的话）。

感谢您的建议。JS/jQuery解决方案是可以的，尽管直接CSS是第一个偏好。

Answer 1

混合模式CSS属性描述了元素的内容应如何与元素的直接父和元素的背景融合。

来源：https：//developer.mozilla.org/en-us/docs/web/css/mix-blend-mode

混合模式简单地提供了混合层颜色的视觉方式，但是DOM仍然相同。因此，以您现在正在接近它的方式，没有可能单击那个视觉"孔"。

您需要使用JavaScript实际触发元素背后的链接中的单击。

使用CSS，我发现可以单击一个选项。您可以使用指针 - 事件：无；这可能会使Clickable背后的链接。但是，这将使元素不响应任何鼠标事件，包括滚动。

#a{pointer-events: none;}

<div style="height:400px;width:300px;margin:0 auto;background-image: repeating-linear-gradient(45deg, white 0px,#ebebeb 60px);border:1px solid grey;overflow:scroll;position:relative;">
  <div style="padding:20px"><span>
        lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor 
      </span>
    <br>
    <br>
    <a href="http://www.stackoverflow.com>Stack Overflow">Stack Overflow</a>
  </div>
  <div id="a" style="height:100%;width:100%;background:white;mix-blend-mode:hard-light;position:absolute;top:0;left:0;overflow:scroll">
    <div style="height:300px"></div>
    <div style="width: 90%;height: 50px;margin: 0 auto 0;border: solid 1px red;border-radius: 10px;background:grey;pointer-events:none;"></div>
    <div style="height:2000px"></div>
  </div>
</div>

Answer 2

我将在此处发布此信息，以解决我自己的需求（并且非常符合上面@sinisake同时提出的解决方案） - 但我仍然有兴趣在更通用的解决方案中。

（单击功能被评论出来，因为沙箱不允许window.open。）

$('#overlay').click(function() {
  alert('visible')
  if ($(this).offset().top < 230 && $(this).offset().top > 180) {
    //window.open($('#link').attr('href'), '_blank');
    alert($('#link').attr('href'), '_blank');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="back" style="height:400px;width:300px;margin:0 auto;background:lightblue;background-image: repeating-linear-gradient(45deg, white 0px,#ebebeb 60px);border:1px solid grey;overflow:scroll;position:relative;">
  <div style="padding:20px"><span>
        lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor 
      </span>
    <br>
    <br>
    <a id="link" href="http://www.stackoverflow.com">Stack Overflow</a>
  </div>
  <div style="height:100%;width:100%;background:white;mix-blend-mode:hard-light;position:absolute;top:0;left:0;overflow:scroll;">
    <div style="height:300px"></div>
    <div id="overlay" style="width: 90%;height: 50px;margin: 0 auto 0;border: solid 1px red;border-radius: 10px;background:grey"></div>
    <div style="height:2000px"></div>
  </div>
</div>

Answer 3

这应该有效：

$('#overlay').click(function(e) { 
  if(isElement($("a"),e)){
     console.log("link clicked");
  } 
});
function isElement($el, e){
  var xmin = $el.offset().left;
  var ymin = $el.offset().top;
  var xmax = xmin +  $el.width();
  var ymax = ymin + $el.height();
  
  if(e.pageX >= xmin && e.pageX <= xmax &&  e.pageY >= ymin && ymax >= e.pageY){
   return true;
  }
  return false;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="back" style="height:400px;width:300px;margin:0 auto;background:lightblue;background-image: repeating-linear-gradient(45deg, white 0px,#ebebeb 60px);border:1px solid grey;overflow:scroll;position:relative;">
  <div style="padding:20px"><span>
        lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor lorem ipsum amet sit dolor 
      </span>
    <br>
    <br>
    <a id="link" style="background-color:yellow;" href="http://www.stackoverflow.com">Stack Overflow</a>
  </div>
  <div style="height:100%;width:100%;background:white;mix-blend-mode:hard-light;position:absolute;top:0;left:0;overflow:scroll;">
    <div style="height:300px"></div>
    <div id="overlay" style="width: 90%;height: 50px;margin: 0 auto 0;border: solid 1px red;border-radius: 10px;background:grey"></div>
    <div style="height:2000px"></div>
  </div>
</div>
</body>
</html>