html - 灰度影响容器中的所有内容

Question

当我向我的容器中添加灰度时，它使所有内容都变成灰色。我试图让我的背景变成灰度，我的跨度或其中的任何东西都不会受到影响。

目标是使我的背景图像仅灰度化。并且能够不影响我的内容。

有谁知道如何做到这一点？

HTML

<div class="greyscale">
    <span>a</span>
</div>

CSS

div {
  width:20%;
  height:20%;
  background-image: url('/image/theimage.png');
  color:red;
}

.greyscale {
  -webkit-filter: grayscale(100%);
  filter: greyscale(100%);
}

span {
   -webkit-filter: grayscale(0);
    filter: greyscale(0);
}

Answer 1

给你的诀窍是用 after

div {
  width:500px;
  height:500px;
  color:red;
  position: relative;
}
div:after {
  content:"";
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right:0;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/IMG_M7test1816.JPG/1280px-IMG_M7test1816.JPG');
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%); /* fix type error */
  z-index: -1;
  }

span {
  z-index: 3;
}

<div>
    <span>Test</span>
</div>