使父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;

正如您所看到的,甚至还有一个"过渡"属性,使图像具有平滑的渐变过渡到全彩色.我遇到的问题是我正在应用它的div也影响位于div内部的子文本,也将文本转换为灰度.这是一个问题,因为文本需要是白色的,即使没有被盘旋.

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

小提琴http://jsfiddle.net/yMHm4/1/

Answer 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;
}

小提琴

我还将过滤器更改为模糊,以使文本不受过滤器影响更清晰.既然你也有一些不透明度设置,文本看上去还是灰色的,只是因为你看到其下的灰色.

使用亮度过滤器添加示例(用于webkit)

演示2