html - 为什么应用 CSS 过滤器会阻止包含的链接？我可以解决这个问题吗？

Question

我已尝试创建一个演示情况的最小片段。以下 HTML/CSS 创建了两个框，一个红色，一个青色。每个都包含一个可点击的链接。当我应用 CSS 过滤器时(就像我创建青色过滤器所做的那样)，该框不再可点击。我最好的猜测是这与“堆栈上下文”有关，但我承认我对它们了解不够。

对于问题的第二部分，解决这个问题，有没有什么方法可以修改 filtered 类的 CSS 来避免这个问题？我在将 CSS 过滤器应用于图像的 Chrome 扩展程序的上下文中遇到了这个问题，所以我想要一个不需要修改网站底层结构(HTML)或显着改变网站外观的解决方案。如果有一种解决方案可以以编程方式应用而不会引入其他网站现在行为不正确的风险，我认为它特别有用。

.filtered {
  filter: invert(100%);
}

/* I cannot modify any of the following CSS to solve this. */

div, a {
  display: block;
  height: 50px; width: 50px;
  left: 0; top: 0;
  position: absolute;
}

.outer:before {
    display: block;
    height: 50px; width: 50px;
    left: 0px; top: 0;
    position: absolute;
    content: '';
    z-index: 2;
}

.inner {
    background: red;
}

.link {
    z-index: 2;
}

<div style="position: relative">
  <div class="outer">
    <div class="inner">
      <a href="http://example.com" class="link"></a>
    </div>
  </div>
</div>
<div style="position: relative">
  <div class="outer">
    <div class="inner filtered">
      <a href="http://example.com" class="link"></a>
    </div>
  </div>
</div>

Answer 1

您应该设置 z-index的 .filtered元素高于 z-index的 :before伪类:

.filtered {
  filter: invert();
  z-index: 10;
}

.filtered {
  filter: invert();
  z-index: 10;
}

/* I cannot modify any of the following CSS to solve this. */

div, a {
  display: block;
  height: 50px; width: 50px;
  left: 0; right; 0; top: 0; bottom: 0;
  position: absolute;
}

.outer:before {
    display: block;
    height: 50px; width: 50px;
    left: 0px; right: 0px; top: 0; bottom: 0;
    position: absolute;
    content: '';
    z-index: 2;
}

.inner {
    background: red;
}

.link {
    z-index: 2;
}

<div class="outer">
  <div class="inner filtered">
    <a href="http://example.com" class="link"></a>
  </div>
</div>