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下的所有元素..

如何在受过滤影响的元素中影响元素？

2 个答案: