使父级div的webkit-filter不影响子元素

Question

我正在使用一种非常花哨的 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;

如您所见，甚至还有一个 'transition' 属性，以使图像在进入全彩色之前具有平滑的淡入效果。我遇到的问题是，我正在应用它的 div 也影响着位于 div 内部的子文本，将文本也变成了灰度。这是个问题，因为即使不悬停在上面，文本也需要是白色的。

我尝试了在子文本上使用另一个滤镜来抵消这个滤镜，但似乎不起作用...请查看fiddle

fiddle链接：http://jsfiddle.net/yMHm4/1/

- little tiny man

---

尝试使用此线程可能的解决方案 - user2865335

针对你的情况，你可以将 text div 放在 .cell A1 外面。虽然我猜你之所以把它放在里面是有原因的，因此答案是 - 你不能轻松地阻止不透明度的继承。你必须创建单独的 div... - Shahar

Answer 1

这并不是属性继承的问题，尽管你可能会这样认为。

过滤器的工作方式使得在CSS中更改属性不可能解决问题：受到过滤器影响的元素被呈现出来，所有子元素都被呈现，然后结果（作为图像）应用了过滤器。

因此，唯一剩下的选择是：

1）更改HTML，就像Lowkase建议的那样

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

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

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

演示2

- vals

---

非常好的撰写和解决方案。我现在不在电脑旁边测试，但是我可以将透明度的更改也放在before元素中吗？透明度之所以存在是因为我想要使图像变暗，这就是为什么背景设置为黑色的原因。 - little tiny man

当然可以。如果您只想让图像变暗，可以在您的滤镜中尝试亮度（50％）。 - vals

Answer 2

你的br标签存在一些HTML错误，应该是br/，而不是/br。

下面的解决方案将文本容器从图像div中取出，并将其放置为绝对定位的元素。

http://jsfiddle.net/yMHm4/3/

#text {
    position:absolute;
    top:10px;
    left:25%;
    color:#ffffff;
    text-align:center;
    font:18px sans serif;
    text-decoration:none;
}

<div id="container">
    <div id="row">
        <div class="cell A1"></div>
        <div id="text">
            <b>SPINDRIFT KIOSK</b>
            <br/>
            Digital Collage
            <br/>
            <i>Mikey</i>
        </div>        
    </div>
</div>

您可以在CSS中使用“not”选择器，但我不确定它们在跨浏览器方面的兼容性如何。这种解决方案是一种更加简单直接的方法。

- Lowkase