内部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>