使父div webkit过滤器不影响孩子

您可以想到，这不是属性继承的问题。

过滤器的工作方式无法解决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);     filter: gray;     -webkit-filter: blur(15px);      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;}

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

添加了使用亮度滤镜的示例（对于Webkit）