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

一尘不染

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

css

我正在使用一个非常精美的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内的子文本，并将文本也变为灰度。这是一个问题，因为即使未悬停在文本上，文本也必须为白色。

我试着在子文本上将过滤器与另一个过滤器取反，但这似乎不起作用…

阅读 252

2020-05-16

共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）

2020-05-16