做一个父div的webkit过滤器不影响儿童 [英] Make a parent div webkit-filter not affect children

问题描述

我使用一个非常花哨的webkit过滤器来制作背景图像灰度，并且将鼠标悬停在图像上变成彩色。

这是过滤器

  filter：none; 
 -webkit-filter：grayscale（0）; 
过渡：不透明.3s缓和; 
 -moz-transition：不透明.3s缓入; 
 -webkit-transition：不透明.3s缓入; 
  

正如您所看到的，甚至有一个过渡属性，以便图像具有平滑的衰落过渡变成全彩。我遇到的问题是，我应用它的div也影响了div内定位的子文本，并将文本也变为灰度。这是一个问题，因为文本需要是白色的，即使没有被悬停。

我试过用另一个儿童文本否定过滤器，但它似乎没有工作...检出小提琴

小提琴 http： //jsfiddle.net/yMHm4/1/

解决方案

这不是属性继承的问题，因为你可以认为。

过滤器的工作方式使得无法修复CSS中的变化属性：呈现受过滤器影响的元素，渲染所有子元素，然后结果（作为图像）应用了过滤器。

所以剩下的唯一选择就是：
$ b $ 1 1）按照Lowkase的建议更改HTML

2）在你的情况下，似乎你想让灰色成为背景图像。在这种情况下，您可以按原样保留HTML，将图像显示在伪元素中，并将过滤器应用于此伪元素。

CSS

  .cell {
 opacity：0.7; 
 width：420px; 
 height：420px; 
过渡：不透明.3s缓和; 
 -moz-transition：不透明.3s缓入; 
 -webkit-transition：不透明.3s缓入; 
} 
 
 .A1 {
 position：relative; 
} 
 .A1：之前{
 content：; 
位置：绝对; 
宽度：100％; 
身高：100％; 
 top：0px; 
 left：0px; 
 background-image：url（'http://i.imgur.com/NNKxZ5R.jpg'）; 
 filter：url（filters.svg＃grayscale）; / * Firefox 3.5+ * / 
 filter：grey; / * 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：悬停：之前{
过滤器：无; 
 -webkit-filter：grayscale（0）; 
过渡：不透明.3s缓和; 
 -moz-transition：不透明.3s缓入; 
 -webkit-transition：不透明.3s缓入; 
} 
  

小提琴

我也将您的过滤器更改为模糊，以使其更清晰，文本不受过滤器影响。由于您还设置了一些不透明度设置，因此只是因为您看到下面的灰色而使文本看起来很灰。

添加了使用亮度过滤器的示例（for webkit）

demo 2

I'm using a very fancy webkit filter to make background-images grayscale, and on hover over the images become color.

Here's the filter

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;

As you can see, there's even a 'transition' property so that the image has a smooth fading transition into full color. The problem that I'm having is that the div I'm applying it to is also affecting the child text positioned inside the div, turning the text into grayscale as well. This is a problem because the text needs to be white, even when not being hovered over.

I've tried negating the filter with another one on the child text but it doesn't seem to work... Check out the fiddle

Fiddle http://jsfiddle.net/yMHm4/1/

解决方案

This is not a problem of properties inheritance, as you can think.

The way filters work makes that imposible to fix changing attributes in the CSS: The element affected by the filter is rendered, all the children are rendered, and then the result (as an image) has the filter applied.

So the only alternatives left are:

1) Change the HTML, as Lowkase suggested

2) In your case, seems that all you want to make gray is the background image. In this case, you can leave the HTML as is, display the image in a pseudo element, and apply the filter to this pseudo element.

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

I have also changed your filter to blur to make it more clear the the text is not affected by the filter. Since you had also some opacity set, the text still looked grayish just because you were seeing the gray under it.

Added example using brightness filter (for webkit)

demo 2

这篇关于做一个父div的webkit过滤器不影响儿童的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！