具有重叠 DIV 的 webkit-filter 灰度答案

【问题标题】：webkit-filter greyscale with overlaying DIV具有重叠 DIV 的 webkit-filter 灰度
【发布时间】：2013-09-20 22:47:09
【问题描述】：

我在 div http://jsfiddle.net/wZvjH/3/ 上的背景图像上使用灰度过滤器时遇到问题，悬停时 .bg 会改变颜色。

但是，即使我应用了z-index，为什么.left1 和.left2 也是灰度的？那不是计划。我该如何解决这个问题？

【问题讨论】：

Z-Index div hover overlay issues with [windows] Webkit (Safari, Opera, etc)的可能重复
抱歉，我使用的是 Chrome/Mac。
如果问题与 WebKit 相关，那么在 Mac、Windows、Linux、iOS 上可能相同。 WebKit 是所有这些平台上 Chrome 中使用的渲染引擎（好吧，直到最近，当谷歌决定使用 Blink 引擎时，但我相信它仍然与您的问题有关）。您可以通过在 Firefox 和 IE 中尝试相同的操作来验证是否（如果您无权访问，请使用在线 IE 渲染器）。
好的。我想我错过了那篇文章的重点，它暗示了导致我的问题的位置属性？

【解决方案1】：

如果您将过滤器应用到一个元素，该过滤器也会应用到它的所有子元素。没有办法关闭它。如果您不想对它们应用过滤器，则需要将 left 和 left2 移出层次结构，以便它们是主 <div> 的兄弟姐妹。

【讨论】：