Question

我尝试过使用这种技术

<div class="grayscale"><span style="color:red">Red Text</span>

 .grayscale {
     background: url(yourimagehere.jpg);
     -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
     -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
     -webkit-filter: grayscale(100%);
     filter: gray;
     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
 }

它在背景图像上运行良好，但也会使框中的所有内容灰显。有没有办法只有灰色背景但保持内容全彩？谢谢！

fiddle

Answer 1

有可能，如here

您需要将背景图像设置为:before元素，然后灰度滤镜将不会应用于子级。

HTML

<div class="module">
  <div class="module-inside">
    Module
  </div>
</div>

CSS

body {
  height: 100vh;
  padding: 0;
  display: grid;
  align-content: center;
  justify-content: center;
}
.module {
  width: 300px;
  height: 300px;
  display: grid;
  place-items: center;
  color: #ff43ea;
  position: relative;
}
.module::before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(https://images.unsplash.com/photo-1494645009625-cc17363a5f20?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=bd502af39c922553e5a13624d4f44f40);
  background-size: cover;
  filter: grayscale(100%);
}
.module-inside {
  position: relative;
  font: bold 42px sans-serif;
}

示例： https://codepen.io/chriscoyier/pen/GXeQyJ

Answer 2

您正在使用类greyscale将灰度应用于整个div。这意味着div内的所有内容都符合要求。因此，您需要从灰度div中取出内容（跨度）并使用css定位来覆盖图像上的内容。

Answer 3

这几乎是@chris所说的。取自http://dev.w3.org/fxtf/filters/：

除非之外的计算值会导致创建a 堆叠上下文[CSS21] 与CSS不透明度相同。 所有的元素后代与过滤器一起呈现为一个组效果适用于整个群体。

例如，您可以将文本从div中取出并以绝对定位放置。

灰度背景图片，但不是内容

3 个答案: