21

我正在使用一个非常漂亮的 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/

4

2 回答 2

18

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

过滤器的工作方式使得修复 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

于 2014-03-23T10:19:41.527 回答
1

您的 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 中使用“非”选择器，但我不确定它们对跨浏览器的友好程度。这个解决方案是一种更简单的方式来做到这一点。

于 2014-03-22T22:54:42.313 回答