bryan bryan - 3 months ago 11
CSS Question

Greyscale affecting everything in container

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

Answer

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>

Comments