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

Le code CSS suivant filtre:

filter: brightness(0) invert(1);

fait des éléments ci-blanc (source). Joli, mais est-il une façon de le faire d'une autre couleur au lieu de cela, en bleu, par exemple? C'est pour les situations où il y a un arrière-plan transparent, par exemple, une icône. Je veux faire de l'icône d'une couleur arbitraire.

OriginalL'auteur mahemoff | 2015-01-17

  1. 6

    Vous pouvez changer la couleur d'une image avec l' hue-rotate() filtre:

    filter:hue-rotate(90deg)

    Cela va changer de couleur orange/rouge vert/bleu etc. Il sera en effet de toutes les couleurs, cependant afin de ne pas transformer une image en couleur en couleur des images. Mais bien plutôt de déplacer toutes les couleurs autour de la roue des couleurs.

    Vous pouvez empiler des filtres, de sorte que vous pouvez pirater une solution par la conversion en niveaux de gris, l'ajout de sépia et en tournant la teinte. Ce faire une image ressembler à une seule teinte verte ombrée:

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

    Si vous vous souciez de traiter avec le vecteur de travail comme une icône que vous utilisez fréquemment, vous pouvez envisager de convertir en SVG, alors vous pouvez mettre de la couleur avec du css. https://icomoon.io peut vous aider avec ceci.

    OriginalL'auteur Mark Meyer

  2. 4

    Si vous faites référence à un filtre SVG à partir de votre CSS, vous pouvez obtenir une couleur spécifique. Filtre SVG extrait de code ci-dessous. Pour votre couleur particulière remplacer les .7/.4/.5 avec les unités de valeur 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 une très douteux filtre, car il ne fonctionne pas dans l'espace HSL. C'est un RVB rapprochement qui tend à clip couleurs saturées mal.

    OriginalL'auteur Michael Mullany

  3. 3

    Ajoutant contrast(0) comme la première étape d'aplatissement de l'icône de couleurs pour un uniforme gris, dont j'avais besoin pour mes fins. J'ai également besoin de jouer avec brightness et saturate à me frapper la couleur cible.

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

    Codepen exemple

    OriginalL'auteur Paul Chamberlain