如何不影响受过滤器影响的元素内的元素？答案

【问题标题】：How to don't effect elements inside an filter-affected element?如何不影响受过滤器影响的元素内的元素？
【发布时间】：2015-12-04 07:27:24
【问题描述】：

我有一个<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%);    
}

【问题讨论】：

标签： html css filter grayscale

【解决方案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>

【讨论】：

这正是我的问题。由于过滤器，红色段落变为灰色。
是的，它在这个例子中有效。不在我的项目上。我不能使用绝对位置。
为什么不呢？确保你得到正确的其他位置

【解决方案2】：

这样的？

.div-id  { color: grey; } 
.div-id * { color: red; }

* 将匹配 div 下的所有元素..

【讨论】：