使父级 div webkit-filter 不影响子级

我正在使用一个非常奇特的 webkit 过滤器来使背景图像变成灰度，并将鼠标悬停在图像上变成彩色。

这是过滤器

filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;

正如您所看到的，甚至还有一个“过渡”属性，以便图像可以平滑地淡入淡出过渡为全彩。我遇到的问题是，我应用它的 div 也会影响位于 div 内的子文本，将文本也变成灰度。这是一个问题，因为即使没有将鼠标悬停在文本上，文本也需要为白色。

我尝试过在子文本上使用另一个过滤器来否定过滤器，但它似乎不起作用......看看小提琴

Fiddle http://jsfiddle.net/yMHm4/1/ http://jsfiddle.net/yMHm4/1/

正如您所想，这不是属性继承的问题。

过滤器的工作方式使得修复 CSS 中不断变化的属性变得不可能：渲染受过滤器影响的元素，渲染所有子元素，然后结果（作为图像）应用过滤器。

所以剩下的唯一选择是：

1）按照Lowkase的建议更改HTML

2）在你的情况下，似乎你只想使背景图像变成灰色。在这种情况下，您可以保持 HTML 不变，在伪元素中显示图像，然后将过滤器应用于该伪元素。

CSS

.cell{
    opacity:0.7;
    width:420px;
    height:420px;
    transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
}

.A1 {
    position: relative;
}
.A1:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-image:url('http://i.imgur.com/NNKxZ5R.jpg');
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: blur(15px); /* Google Chrome, Safari 6+ & Opera 15+ */ 
    z-index: -1;
}

#text {
    color:#ffffff;
    text-align:center;
    font:18px sans serif;
    text-decoration:none;
}
.cell:hover {
    opacity:1.0;
}

.A1:hover:before {
    filter: none;
    -webkit-filter: grayscale(0);
    transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
}

fiddle http://jsfiddle.net/yMHm4/4/

我还将您的过滤器更改为模糊，以使其更清晰，文本不受过滤器的影响。由于您还设置了一些不透明度，因此文本看起来仍然grayish只是因为你看到了它下面的灰色。

添加了使用亮度滤镜的示例（适用于 webkit）

demo 2 http://jsfiddle.net/yMHm4/5/