内部部門のグレースケール

Question

グレースケールをdivの背景に設定したいとします。

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

私は#mainに-webkit-filter: grayscale(100%)を設定します。私はどのようにspanに何らかの色の内部のdivのセットテキストのグレースケールをオフにする方法を知らない。 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>