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

这里你的诀窍是在

之后做到这一点

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

您可以添加容器并添加如下图像：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: