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）改变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）添加了示例

demo 2

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”选择器，但我不确定它们是如何跨浏览器友好的。这种解决方案是一种更简单的方式。

使父div webkit-filter不影响子项

2 个答案: