使用mix-blend-mode单击通过一个‘孔’剪切

Question

这看起来应该是可能的，但解决方案我已经想了很长时间了。你能用mix-blend-mode在可滚动的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

，mix- blend -mode CSS属性描述了元素的内容应该如何与元素的直接父元素的内容和元素的背景混合。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

混合模式只是提供了混合图层颜色的可视方式，但DOM仍然是相同的。因此，在你现在接近它的方式中，不可能点击通过视觉上的“洞”。

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

使用CSS，我发现有一个可以点击的选项。您可以使用pointer-events: none；这可以使后面的链接可点击。但是，它将使元素不响应任何鼠标事件，包括滚动。

​

#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>

​