我正在使用一个非常精美的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内的子文本,并将文本也变为灰度。这是一个问题,因为即使未悬停在文本上,文本也必须为白色。
我试着在子文本上将过滤器与另一个过滤器取反,但这似乎不起作用…
您可以想到,这不是属性继承的问题。
过滤器的工作方式无法解决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)