尽管 WebKit 过滤器在 CSS 中悬停，如何保持堆叠顺序？

Webkit 过滤器悬停中的堆叠顺序更改：了解堆叠上下文

应用 WebKit 过滤器时出现有关堆叠顺序的奇怪问题：悬停时在图像上，顺序意外地发生了变化。要在不破坏其他网站元素的情况下解决此挑战，请深入研究堆叠上下文的复杂性。

堆叠上下文决定了元素在页面上显示的顺序。当元素的样式属性包含某些值（例如变换、溢出或过滤器）时，元素会创建新的堆叠上下文。

在提供的示例中，当将 WebKit 过滤器（灰度）应用于图像时，堆叠上下文是自动建立的。这个新创建的上下文会导致绝对定位的 div（“.slide-content”）位于图像下方，导致其被隐藏。

为了防止这种不良行为并保持原始的堆叠顺序，这里有一个修改后的解决方案：

替换此CSS：

<code class="css">li a:hover img {
  -webkit-filter: grayscale(100%);
}</code>

使用此替代方案，可以避免创建堆叠上下文：

<code class="css">li a:hover img::before {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  filter: grayscale(100%);
  z-index: -1;
}</code>

通过使用伪元素（： :before) 使用绝对位置并将其放置在图像下方，我们可以有效地模拟滤镜的效果，而无需创建新的堆叠上下文。这种巧妙的解决方法可以让您实现所需的视觉效果，同时保留预期的堆叠顺序。

以上是尽管 WebKit 过滤器在 CSS 中悬停，如何保持堆叠顺序？的详细内容。更多信息请关注PHP中文网其他相关文章！