Niveaux de gris en div interne

Question

Je souhaite définir l'échelle de gris sur le fond de mon div.

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

Je mis -webkit-filter: grayscale(100%) à #main. Je ne sais pas comment désactiver les niveaux de gris en interne div pour définir le texte en span à une certaine couleur. J'ai essayé de définir grayscale(0%) et de régler z-index mais cela n'a pas fonctionné. Est-il possible de faire quelque chose comme ça?

Désolé pour mon anglais.

Answer 1

Vous pouvez utiliser le mode de fondu qui s'applique à l'arrière-plan.

#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>