HTML

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

.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元素之上，我想这与堆叠顺序有关，如果有人能够向我充分解释，我将不胜感激。

使用CSS更改背景PNG的颜色

HTML

CSS

1 个答案:

HTML

CSS