Greyscale affecting everything in container

Question

When I add a greyscale to my container, it makes everything grey. I am trying to just get my background to be greyscale and my span or really anything inside of it to not be affected.

The goal is to make my background image grey scale only. And to be able to not have my content be affected.

Does anyone know how to accomplish this?

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

Use grey scale filter in the pseudo element of div and position it relatively to the parent. — K K, Aug 29 '16 at 17:52
Possible duplicate of [How to apply a CSS 3 blur filter to a background image](http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image) — gcampbell, Aug 29 '16 at 17:57

score 0 · Accepted Answer · edited Aug 29 '16 at 17:56

Here you go the trick is to do it with 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>

score 0 · Answer 2 · answered Aug 29 '16 at 17:57

You could add a container and add a image like this:

.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

2 Answers2