Est-il possible de coloriser une image PNG blanche avec CSS uniquement?

Je sais qu'il y a de nombreux filtres css, surtout pour webkit, mais je ne peux pas trouver un solution pour coloriser un blanc (#FFFFFF) de l'image. J'ai essayé une combinaison des filtres, mais aucun d'entre eux de faire à mon image colorisée. Je peux seulement changer l'image dans la plage de niveaux de gris ou en sépia.

Donc ma question est:
Est-il possible de modifier mon totalement blanc png (par exemple) en rouge à l'aide de css?

Comme indiqué sur cette image:

Est-il possible de coloriser une image PNG blanche avec CSS uniquement?

source d'informationauteur Balázs Varga

  1. 8

    Récemment, j'ai la même question et je pense que cette approche est le partage de la valeur pour les futurs lecteurs.
    Essayez cette

    filter: brightness(50%) sepia(100) saturate(100) hue-rotate(25deg);

    De la luminosité d'assombrir l'image, sépia va faire un peu jaunâtre, saturation pour augmenter la couleur, et enfin la teinte de rotation pour changer la couleur.
    Ce n'est pas de la croix-navigateur convivial:

    • Il n'est pas pris en charge sur IE

    • Sur chrome, hue-rotate(25deg) fera une image rouge, mais vous avez besoin d'
      une valeur négative dans firefox par exemple hue-rotate(-25deg) pour le rendre rouge.
      Vous pouvez l'utiliser pour cible les navigateurs mozilla:
      https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/

    Voici quelques conseils utiles et des outils que j'ai utilisé quand je travaille avec des images/des icônes à l'aide de css:

    • Si vous avez la version svg de l'image, vous pouvez les convertir en
      police d'icônes à l'aide de cet outil https://icomoon.io/ . Pour changer la couleur, vous avez juste besoin color:#f00; tout comme les couleurs de police.
    • Si vous avez besoin pour obtenir cet effet de hover état, l'Utilisation d'image rouge avec filter: brightness(0) invert(); sur la NON-stationnaire de l'état, et filter: brightness(1); sur le vol stationnaire de l'état. Hovever cela ne fonctionne toujours pas sur IE
    • Utiliser la feuille sprite. Vous pouvez créer vous-même à l'aide outil de modification des images ou utilisez la feuille sprite générateurs disponibles en ligne. Ensuite, vous pouvez utiliser SpriteCow pour obtenir le css pour chaque sous-image de votre spritesheet.
  2. 2

    Cela peut être fait avec un CSS filtre qui fait référence à un Filtre SVG (les navigateurs webkit + firefox). Voici le filtre SVG.

    <svg width="800px" height="600px">
  <filter id="redden">
    <feColorMatrix type="matrix" values="1 1 1 0 0 
                                         0 0 0 0 0 
                                         0 0 0 0 0 
                                         0 0 0 1 0"/>
  </filter>

<image filter="url(#redden)" width="190" height="400" preserveAspectRatio="xMinYMin slice"  xlink:href="http://i.stack.imgur.com/e6MUC.jpg"/>
</svg>