如何不影響受過濾器影響的元素內的元素？

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

來源

2015-12-03 CodeVolunteer

你無法避免它。正如你不能用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>

來源

2015-12-03 23:12:38 CoderPi

這正是我的問題。由於過濾器，紅色段落變成灰色。 – CodeVolunteer

@CodeVolunteer我做了它的工作，看代碼示例 – CoderPi

是的，它在這個例子中工作。不在我的項目上。我無法在絕對位置上工作。 – CodeVolunteer

-1

像這樣的事情？

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

的*將匹配在div下的所有元素..

來源

2015-12-03 23:27:24

如何不影響受過濾器影響的元素內的元素？

回答

相關問題