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

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>

Answer 2

是这样的吗？

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

* 将匹配 div..

下的所有元素

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

How to don't effect elements inside an filter-affected element?

html

css

filter

grayscale