內部div的灰度

Question

我想將灰度設置爲我的div的背景。

<div id="main"> 
    <div id="internal"> 
    <span>Text in yellow color</span> 
    </div> 
</div> 

我#main設置-webkit-filter: grayscale(100%)。我不知道如何關閉內部div中的灰度以將span中的設置文本關閉爲某種顏色。 我試圖設置grayscale(0%)，並設置z-index但它沒有工作。 有沒有可能做這樣的事情？

對不起，我的英語。

Answer 1

您可以使用適用於背景的混合模式。

#internal{ 
 
background-color: gray; 
 
background-blend-mode: luminosity; 
 
} 
 

 
#internal > span{ 
 
    color:yellow; 
 
}

<div id="main"> 
 
    <div id="internal"> 
 
    <span>Text in yellow color</span> 
 
    </div> 
 
</div>