小编典典

使父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内的子文本,并将文本也变为灰度。这是一个问题,因为即使未悬停在文本上,文本也必须为白色。

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


阅读 271

收藏
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