使用CSS更改背景PNG的颜色

Question

我正在尝试在网页上设置背景图片，并通过以下方式将其颜色更改为黑白：

    -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

.boo {
-webkit-filter: grayscale(100%) blur(2px);
position: absolute;
padding:0px;
padding-top:0px;
top:0;
}

#content{
margin-top: 1em;
margin-right:auto;
margin-left:auto;
display:block;
width: 100%;
position:relative;
}

Answer 1

其实我可以只使用相同的背景图片。

您需要做的是将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元素之上 ，我想它与堆叠顺序有关，如果有人可以向我完全解释一下，我将不胜感激。