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

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

在这里，诀窍是在

之后完成

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>

Answer 2

您可以像这样添加容器和图像：

.container {
  display: block;
  width: 300px;
  height: 300px;
  color: yellow;
  z-index: 100;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.text {
  padding: 10px;
}
.cat {
  position: absolute;
  top:0px;
  -webkit-filter: grayscale(100%);
  filter: greyscale(100%);
  z-index: -1;
  background-position: center;
}

<div class="container">
  <img class="cat" src="http://placekitten.com/300/300" />
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

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

Greyscale affecting everything in container

html

css

grayscale