Question

在Chrome中关闭-webkit-filter似乎存在问题。

当使用非浏览器特定的filter css属性时，在firefox 34.0.5或firefox 35中我的期望似乎也没有用。

显然，根据caniuse，属性应该可用。

给出以下代码片段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
  <style>
    #outer {
      background: blue;
      -webkit-filter: grayscale(100%);
    }

    #outer #inner {
      background: green;
      -webkit-filter: none; 
    }
  </style>
</head>
<body>
  <div id="outer">
    outer
    <div id="inner">inner</div>
  </div>
</body>
</html>

最重要的是，为什么div#inner没有关闭其过滤器？

Answer 1

我认为您误解了filter的工作原理：过滤器不像其他CSS属性那样继承，它只对div的渲染内容应用一次。所以你的内部div没有应用过滤器，那么包含内部div的外部div就会应用过滤器。

filter是一个合成操作：渲染外框的内容，然后应用filter。你不能＆＃34;关掉＆＃34;内盒上有一个过滤器，因为它没有在那个级别上应用。

将其想象为画中画：您拥有外部图像，粘贴内部图像，然后拍摄生成的图像并应用灰度效果。这基本上就是浏览器在这里做的事情。

基本上，它的工作原理如下：

Visual diagram of compositing process for inner/outer

如果你想让它起作用，你可以让你的内部div在一个完全独立的层上。也就是说，让你的＆＃34;外部＆＃34; div成为一个较低层的div并使你的内心＆＃34;在较低层div前面的div 上面 /更高层div，而不是包含在其中：

为什么-webkit-filter不适用于嵌套元素？

1 个答案: