web-dev-qa-db-fra.com

filtre css pour rendre les éléments d'une seule couleur

Le filtre CSS suivant:

filter: brightness(0) invert(1);

rend les éléments tout blancs ( source ). Neat, mais existe-t-il un moyen de leur faire une autre couleur à la place, par exemple bleu? C'est pour les situations où il y a un fond transparent, par ex. une icône. Je veux faire de l'icône une couleur arbitraire.

csscolorscss-filters
14
mahemoff

Cependant, le filtre hue-rotate() affecte toutes les couleurs, il ne transforme donc pas une image en couleur en une image en une seule couleur. Il déplacera plutôt toutes les couleurs autour de la roue chromatique.

Cependant, vous pouvez pirater une solution en la convertissant en niveaux de gris, en ajoutant du sépia puis en faisant pivoter la teinte Cela fait ressembler une image à une seule teinte verte ombrée:

filter: grayscale(100%) sepia(100%) hue-rotate(90deg);

Si vous vous souciez du travail vectoriel comme une icône que vous utiliserez beaucoup, vous pourriez envisager de le convertir en SVG, alors vous pouvez le colorier avec du CSS simple. https://icomoon.io peut vous aider.

9
Mark Meyer

L'ajout de contrast(0) comme première étape aplatira les couleurs de l'icône en un gris uniforme, dont j'avais besoin pour mes besoins. J'ai également dû jouer avec brightness et saturate pour atteindre ma couleur cible.

filter: contrast(0) sepia(100%) hue-rotate(116deg) brightness(1.4) saturate(0.28);

exemple Codepen

8
Paul Chamberlain

Si vous référencez un filtre SVG à partir de votre CSS, vous pouvez obtenir une couleur spécifique. Extrait de filtre SVG ci-dessous. Pour votre couleur spécifique, remplacez le .7/.4/.5 par la valeur unifiée de vos valeurs RVB.

<filter id="colorme" color-interpolation-filters="sRGB">
  <feColorMatrix type="matrix" values="0 0 0 0 .7  0 0 0 0 .4  0 0 0 0 .5  0 0 0 1 0"/>
</filter>

hue-Rotate () est un filtre très altéré car il ne fonctionne pas dans l'espace HSL. C'est une approximation RVB qui a tendance à couper mal les couleurs saturées.

7
Michael Mullany