html - 如何不影响受过滤器影响的元素内的元素？

Question

我有一个 <div>我在其上应用了灰色滤镜，但所有其他元素都在 <div> 中也会受到过滤器的影响。

即使我尝试通过更具体的蜜蜂来覆盖元素，例如

.div-id span { color: blue }

到目前为止，CSS 对我没有帮助。

我该如何解决这个问题？

HTML:

<div class="idea-box-tools text-center">
    <span class="glyphicon glyphicon-wrench"></span>
    <p class="box-headers">Dashboard & Tools</p>
    <p class="box-paragraphs">Lorem ipsum dolor sit amet.</p>
</div>

CSS:

.idea-box-tools:hover {
    background-image: url('includes/tools.jpg');
    background-size: contain;
    -webkit-filter: grayscale(80%) brightness(20%) contrast(100%);    
}

Answer 1

你无法避免它。正如您不能使用 opacity 一样。

然而，您可以做的是，在内部制作另一个 div(带有背景和滤镜)，并将其显示在其他元素下方。

.idea-box-tools:hover > :first-child {
  background-image: url('http://i.telegraph.co.uk/multimedia/archive/02690/Anne-Guichard_2690182k.jpg');
  background-size: contain;
  -webkit-filter: grayscale(80%) brightness(20%) contrast(100%);
}
.box-headers {
  color: red;
}

<div class="idea-box-tools text-center" style="position: relative">
  <div style="position: absolute;  height: 100%;  width: 100%;"></div>
  <div style="position: relative">
    <span class="glyphicon glyphicon-wrench"></span>
    <p class="box-headers">Dashboard & Tools</p>
    <p class="box-paragraphs">Lorem ipsum dolor sit amet.</p>
  </div>
</div>