web-dev-qa-db-fra.com

Filtre CSS comme modificateur de couleur pour une image

Est-il possible de changer, avec les méthodes de filtre CSS comme HueRotate, Saturation et Brightness, la couleur d'un PNG dessiné totalement blanc? Comme l'effet de superposition de couleurs de Photoshop, mais en CSS.

Ce serait une bonne solution pour éviter de créer de nombreuses images qui ne changent que la couleur. Par exemple, un ensemble d'icônes qui ont des versions sombres et claires pour une interface utilisateur.

csshsl
21
Mateus Leon

Vous pouvez également coloriser des images blanches en ajoutant du sépia, puis de la saturation, une rotation de la teinte, par ex. en CSS:

filter: sepia() saturate(10000%) hue-rotate(30deg)

Cela devrait faire de l'image blanche une image verte.

http://jsbin.com/xetefa/1/edit

35
Ciantic

En fait, heureusement, il existe un moyen!

La principale difficulté ici, comme mentionné précédemment, est qu'il n'y a essentiellement aucune couleur dans une image en niveaux de gris. Heureusement, il existe un filtre qui peut pomper dans une certaine couleur!

sepia(100%)

J'ai essayé le style css suivant sur une image en couleur unie, dont la couleur de base est #ccc

sepia(100%) contrast(50%) saturate(500%) hue-rotate(423deg)

J'ai pu changer la couleur de l'image en vert lime.

Profitez ;)

6
xRavisher

C'est une bonne idée, mais cela ne fonctionnera pas avec une image blanche comme vous le suggérez. Vous pouvez le faire avec une image colorée, mais pas si elle est entièrement blanche. J'ai essayé ce qui suit dans Safari en utilisant la version webkit du filtre CSS:

<div style="background-color:#FFF; -webkit-filter: hue-rotate(90deg); width:100px; height:100px; border:1px solid #000;"></div>

Mais la boîte reste blanche. Si je change la couleur en bleu comme ceci:

<div style="background-color:#00F; -webkit-filter: hue-rotate(90deg); width:100px; height:100px; border:1px solid #000;"></div>

Je reçois une boîte rouge. En effet, le filtre fonctionne sur la valeur de teinte qui n'est pas présente en blanc ou en noir.

6
bitfiddler

Essayez de rendre brightness supérieur à 100%. Vous remarquerez que l'image commencera à s'estomper en blanc lorsque vous vous déplacerez plus haut 100%. L'obscurité d'une image déterminera à quelle distance de 100% que vous devez déplacer.

img {

      -webkit-filter: brightness(1000%);

}

N'oubliez pas que seuls les utilisateurs de Google Canary peuvent voir les filtres CSS3 et que les filtres CSS3 n'affectent pas l'image dans un autre navigateur. (jusqu'à présent au moins).

4
j0sh1e