Home / Questions / 15442
Accepted
devconcept
Asked: 2020-06-30 13:01:35 +0800 CST 2020-06-30 13:01:35 +0800 CST

How to make a css filter apply only to the background and not to child elements?

  • 772

I have a series of images that are shown in gray scale when the element has the class, disabledbut this filter is also being applied to the child elements, so the entire block appears in gray.

.item {
  background-size: cover;
  width: 400px;
  height: 200px;
  text-align: center;
  padding-top: 20px;
}
.item.disabled {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
.item .status {
  background-color: green;
  bottom: 30px;
  border-radius: 6px;
  padding: 2px 5px;
  color: white;
  font-weight: bold;
}
.item.disabled .status {
  background-color: red;
}
<div class="item" style="background-image: url(http://lorempixel.com/400/200/sports)">
  <span class="status">ready</span>
</div>
<div class="item disabled" style="background-image: url(http://lorempixel.com/400/200/sports)">
  <span class="status">not ready</span>
</div>

How to make the text that says "not ready" come out in red and not in gray?

As I understand it, the css filter property is not inheritable and its initial value is noneso that it should only apply to the element it is on.

html

1 Answers

  1. Best Answer

    This had happened to me a long time ago, but with the filter: blur, the solution is to play with the positions of the boxes.

    .item {
  background-size: cover;
  width: 400px;
  height: 200px;
  text-align: center;
  padding-top: 20px;
}
.item.disabled {
  position: relative;
  
}
.item .status {
  background-color: green;
  bottom: 30px;
  border-radius: 6px;
  padding: 2px 5px;
  color: white;
  font-weight: bold;
}
.item.disabled .status {
  background-color: red;
}

.no-bw{
  top: 30px;
  display: block;
  position: absolute;
  background-color: red;
  border-radius: 6px;
  padding: 2px 5px;
  color: white;
  font-weight: bold;
  left:50%; 
  width: 76px;
  /*LA MITAD DEL ANCHO DE LA CAJA*/
  margin-left: -38px;
  }

.fondo-bw{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  }
    <div class="item" style="background-image: url(http://lorempixel.com/400/200/sports)">
  <span class="status">ready</span>
</div>
<div class="item disabled" style="">
    <div class="fondo-bw item" style="background-image: url(http://lorempixel.com/400/200/sports)"></div>
    <span class="no-bw">not ready</span>
</div>

    • 3