使用CSS改变背景PNG的颜色

Question

我正在尝试在网页上设置背景图像，将其颜色更改为B/W:

    -webkit-filter: grayscale(100%);

它工作，直到我把另一个图像，应该有他原来的颜色。我尝试使用:

    -webkit-filter: grayscale(0%);

同样带有!important属性，过滤器使用的是属于内容的第一个。

您可以查看此代码http://codepen.io/anon/pen/CIiwE这是如此奇怪的事实，如果我设置背景图像灰度为0%，上部图像为100%，它工作得很好，但我需要相反的。由于

编辑。
感谢webkit的回答。我发布了基于webkit解决方案的解决方案。

<标题> HTML

<div class='boo'>
      <img id='imgbkgr' src="http://placekitten.com/300/300"></img>
</div>
        
<div id="content">
  <div style="background-image:url(http://placekitten.com/100/100);">
  </div>
</div>

<标题> CSS h1> div class="one_answers">

实际上我可以使用相同的背景图像…

你需要做的就是把img从容器中取出来。

CODEPEN

另外，注意我修复了你的html..Img不需要结束标签。加上你的css选择器是。foo而不是#foo.

html

<div class='boo'></div>
<img id="foo" src="http://placekitten.com/300/300" />

css

.boo {
    -webkit-filter: grayscale(100%);
  position: absolute;
  width: 300px;
  height:300px;
  background: url(http://placekitten.com/300/300) no-repeat 0 0;
}
#foo{
  width:10%;
   position: absolute;
  z-index:2;
}

只是一个边注…我注意到如果只使用这个:

#foo{
      width:10%;
      -webkit-filter: grayscale(0);
    }

#foo img呈现在。boo元素的顶部，我猜它与堆叠顺序有关，如果有人能完全解释给我听，我会很感激。