Question

我有一个带背景图像的div，我使用过滤器以黑白显示它（filter: grayscale(100%);）。我现在正试图在该div中放置一个颜色图标。试图将图标设置为grayscale(0%)，但这似乎不起作用。

以下是一个例子：

#a1, #a2 {
  background-image: url(http://ndrichardson.com/blog/wp-content/uploads/2012/04/colorpsychology.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#a1 {
  height: 250px;
  width: 250px;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  position: relative;
}
#a2 {
  height: 50px;
  width: 50px;
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  position: absolute;
  top: 0px;
  right: 0px;
}

<div id="a1"><!-- << this should be black and white -->
  <div id="a2"><!-- << this should be color -->
  </div>
</div>

有没有办法在不创建额外的div来保存背景图像的情况下执行此操作？真正的代码要复杂得多，这就是为什么我想避免额外的div，如果可能的话。

Answer 1

是的，您当然应该使用::before和::after伪元素：

＆＃13;

#a1 {
  height: 250px;
  width: 250px;
  position: relative;
}
#a1:after, #a1:before {
  content: '';
  background-image: url(http://ndrichardson.com/blog/wp-content/uploads/2012/04/colorpsychology.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;  
  position: absolute;
}
#a1:before {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  width: 100%;
  height: 100%;
}
#a1:after {
  height: 50px;
  width: 50px;
  top: 0px;
  right: 0px;
}

＆＃13;

<div id="a1"></div>

＆＃13;

DEMO on JSFiddle

Answer 2

使用filter: grayscale(100%)容器内的颜色是不可能的。

请参阅规范中的the filter property（强调我的）：

除none以外的计算值会导致创建a stacking context与CSS opacity的方式相同。所有元素后代一起呈现为一组 过滤效果作为一个整体应用于群组。

所以是的，你必须在没有它的情况下将内容与过滤器分开。

这并不一定意味着您需要在HTML中使用其他包装器，因为Hiszpan建议您也可以使用伪元素。

灰度（100％）容器内的彩色图像

2 个答案: