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

如何使css过滤器仅适用于背景而不适用于子元素？

  • 772

当元素具有类时，我有一系列以灰度显示的图像，disabled但是此过滤器也被应用于子元素，因此整个块显示为灰色。

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

如何使“未准备好”的文字显示为红色而不是灰色？

据我了解，css filter属性是不可继承的，它的初始值是none这样的，它应该只应用于它所在的元素。

html

1 Answers

  1. Best Answer

    很久以前我就发生过这种情况，但是使用过滤器：模糊，解决方案是使用框的位置。

    .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