Étant donné un PNG transparent affichant une forme simple en blanc, est-il possible de changer la couleur de celui-ci via CSS? Une sorte de superposition ou non?
Vous pouvez définir la background-colorpropriété CSS. Vous pouvez créer une partie non transparente qui sera fixe et une partie transparente de l'image qui sera remplie par n'importe quelle couleur que vous souhaitez via CSS. Est-ce ce que vous souhaitez réaliser?
jakub.g
2
@qbk, cela vaut une réponse, pas seulement un commentaire. Et tu m'as battu d'une seconde, techniquement.
Kirill G
2
Vous pouvez utiliser des éléments pseudo avec un mode de fusion pour recolorer n'importe quelle icône qui est 100% noire ou 100% blanche (l'arrière-plan reste transparent). Voir ma réponse ici: stackoverflow.com/a/39796437/1472114
chrscblls
Réponses:
570
Vous pouvez utiliser des filtres avec -webkit-filteret filter: Les filtres sont relativement nouveaux pour les navigateurs mais pris en charge dans plus de 90% des navigateurs selon le tableau CanIUse suivant: https://caniuse.com/#feat=css-filters
Vous pouvez changer une image en niveaux de gris, sépia et bien plus encore (regardez l'exemple).
Vous pouvez donc maintenant changer la couleur d'un fichier PNG avec des filtres.
Donc, la réponse courte est qu'il n'y a pas de solution générale pour la majorité des navigateurs.
Trilarion
18
Mais l'huerotation ou la saturation feront-elles réellement quelque chose à une image blanche?
Keith
6
Mise à jour 2016: cela fonctionne maintenant dans presque tous les navigateurs sauf IE: caniuse.com/#feat=css-filters
Stan
4
@datatype_void Parfois, vous ne contrôlez pas vous-même l'image de départ. Donc, il semble que vous conveniez que mon argument est valable, vous ne pouvez pas accéder à n'importe quelle couleur à partir du noir ou du blanc. Oh, et j'ai joué plus de 5 minutes pour arriver à cette conclusion.
AsGoodAsItGets
5
spécifiez également que vous pouvez faire des choses comme ceci: ce .gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }qui signifie que vous pouvez passer du noir et transparent ou des niveaux de gris à la couleur et cela fonctionne même sur les gifs animés
tatsu
141
J'ai trouvé cet excellent exemple de codepen que vous insérez votre valeur de couleur hexadécimale et il retourne le filtre nécessaire pour appliquer cette couleur au png
J'ai changé la couleur du blanc du bleu en utilisant ce code:filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);
Anjan Biswas
C'est bien!!
Thiago Pires
2
L'auteur mérite une statue! (notez le: luminosité (0) saturé (100%)
EDIT: J'utilise Font-Awesome sur mon dernier projet. Vous pouvez même l'amorcer. Mettez simplement ceci dans votre <head>:
<linkhref="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"rel="stylesheet"><!-- And if you want to support IE7, add this aswell --><linkhref="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css"rel="stylesheet">
Et puis allez-y et ajoutez des liens d'icônes comme celui-ci:
Font-Awesome utilise différents noms de classe dans la nouvelle version, probablement parce que cela rend les fichiers CSS considérablement plus petits et pour éviter les classes CSS ambiguës. Alors maintenant, vous devez utiliser:
+1 pour une réflexion immédiate. Et de nos jours, il existe des applications en ligne faciles à utiliser pour vous aider à créer une police Web à partir d'une image (svg).
yvan vander sanden
Si <a class="icon-thumbs-up"> </a> est l'ancien nom de la classe et <a class="fa fa-thumbs-up"> </a> est le nouveau, je ne pense pas rend le CSS plus petit, je peux voir un espace supplémentaire entre fa et fa-thumbs-up, ajouter au moins 1 octet supplémentaire à ce fichier CSS si je ne me trompe pas?
Brandito
Font Awesome était génial en son temps, malheureusement son blocage de rendu, ce qui rend Google et ses utilisateurs mécontents. Nous avons d'abord résolu ce problème en supprimant les polices inutilisées des fichiers de police CSS et binaires, réduisant ainsi les données d'environ la moitié. Nous sommes maintenant en train de supprimer complètement et de remplacer par un simple sprite, qui ne rend pas le blocage (processus DOM et CSSOM plus rapides, ce qui accélère les éléments sur la page), et réduira les données de 75% supplémentaires, jusqu'à 6 Ko. FA est d'environ 100 Ko. Les masques CSS peuvent aider dans notre cas, mais probablement inutiles.
YK
25
J'ai pu le faire en utilisant un filtre SVG. Vous pouvez écrire un filtre qui multiplie la couleur de l'image source par la couleur que vous souhaitez modifier. Dans l'extrait de code ci-dessous, flood-color est la couleur dans laquelle nous voulons changer la couleur de l'image (qui est rouge dans ce cas). FeComposite indique au filtre comment nous traitons la couleur. La formule pour feComposite avec arithmétique est (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4) où i1 et i2 sont les couleurs d'entrée pour in / in2 en conséquence. Donc, en spécifiant uniquement k1 = 1, cela ne fera que i1 * i2, ce qui signifie multiplier les deux couleurs d'entrée ensemble.
Remarque: Cela ne fonctionne qu'avec HTML5 car il utilise le SVG en ligne. Mais je pense que vous pourriez faire fonctionner cela avec un navigateur plus ancien en plaçant SVG dans un fichier séparé. Je n'ai pas encore essayé cette approche.
Mec tu te fais voler sur cette réponse. Quiconque cherche à coloriser des images au-delà de ce filtre: la rotation de la teinte peut le faire - c'est la façon de le faire.
MaxPRafferty
23
La balise img a une propriété d'arrière-plan comme les autres. Si vous avez un PNG blanc avec une forme transparente, comme un pochoir, vous pouvez le faire:
Je veux que la partie blanche soit colorée différemment, pas la partie transparente.
Wesley
2
meilleure solution que j'ai trouvée jusqu'à présent. Dommage que cela ne fonctionne que si vous utilisez une couleur d'arrière-plan unie sur vos sites Web
Jules Colle
8
@Wesley, vous devez ensuite inverser l'image (pour que le bit blanc devienne transparent et le reste blanc), ce que vous pouvez faire en utilisant votre éditeur d'image et vos masques préférés.
Charles Goodwin
5
@CharlesGoodwin Cela ne fonctionne que si l'image est placée sur un fond blanc.
WebKit prend désormais en charge les masques alpha en CSS. Les masques vous permettent de superposer le contenu d'une boîte avec un motif qui peut être utilisé pour masquer des parties de cette boîte dans l'affichage final. En d'autres termes, vous pouvez découper des formes complexes en fonction de l'alpha d'une image.
[...]
Nous avons introduit de nouvelles propriétés pour fournir aux concepteurs Web un grand contrôle sur ces masques et sur la façon dont ils sont appliqués. Les nouvelles propriétés sont analogues aux propriétés d'arrière-plan et d'image de bordure qui existent déjà.
Cela fait-il partie d'une norme (à venir), car je n'ai trouvé aucune information sans rapport avec Webkit, ou s'agit-il uniquement d'une saveur Apple? Il semble que le W3 propose SVG pour de telles utilisations: w3.org/TR/SVG/masking.html
feeela
3
Malheureusement, cela ne semble être que du webkit et le blog triche en utilisant des images composites plutôt que des exemples réels. Cette réponse est un peu de hareng rouge.
La question portait sur la colorisation d'une image blanche avec un fond transparent. hue-rotatene fonctionne pas sur le blanc.
Synetech
17
Je pense avoir une solution pour cela qui est a) exactement ce que vous cherchiez il y a 5 ans, et b) est un peu plus simple que les autres options de code ici.
Avec n'importe quel png blanc (par exemple, icône blanche sur fond transparent), vous pouvez ajouter un sélecteur :: after pour recolorer.
.icon {
background: url(img/icon.png);/* Your icon */
position: relative;/* Allows an absolute positioned psuedo element */}.icon::after{
position: absolute;/* Positions psuedo element relative to .icon */
width:100%;/* Same dimensions as .icon */
height:100%;
content:"";/* Allows psuedo element to show */
background:#EC008C; /* The color you want the icon to change to */
mix-blend-mode: multiply;/* Only apply color on top of white, use screen if icon is black */}
J'ai réhébergé l'image hors d'imgur, j'ai eu quelques problèmes pour la charger.
chrscblls
Dans la dernière version de Chrome, il semble que l'arrière-plan (transparent) soit également défini sur la couleur. Dans l'exemple lié, lorsque je survole, je vois juste un carré rose opaque ... Fonctionne bien dans Firefox.
logidelic
1
@chrscblls Le lien est mort.
Steven Lu
15
La ligne la plus simple qui a fonctionné pour moi:
filter: opacity(0.5) drop-shadow(000 blue);
Vous pouvez régler l'opacité de 0 à 1 pour éclaircir ou assombrir la couleur.
Agréable. Cela évite toutes les limitations des autres solutions ici.
cdonner le
3
répéter l'ombre portée 2-3 fois pour le rendre plus fort
djdance
1
GENIUS SOLUTION, semble un peu désordonné dans le CSS, mais avec un commentaire, c'est parfaitement compréhensible. Merci!
Richard KeMiKaL GeNeRaL Denton
ne fonctionnera pas pour obtenir la couleur exacte, c'est toujours une sorte de mélange entre la couleur d'origine et la nouvelle.
swisswiss
cette approche déforme légèrement l'image et elle empire chaque fois que l'ombre portée est appliquée. Comme pour faire une copie d'une copie, les résultats sont différents de l'original.
SMAG
8
J'ai trouvé ça en cherchant sur Google, j'ai trouvé qu'il valait mieux travailler pour moi ...
J'avais besoin d'une couleur spécifique, donc le filtre ne fonctionnait pas pour moi.
Au lieu de cela, j'ai créé un div, en exploitant plusieurs images d'arrière-plan CSS et la fonction de gradient linéaire (qui crée une image elle-même). Si vous utilisez le mode de fusion de superposition, votre image réelle sera mélangée avec l'image "dégradée" générée contenant la couleur souhaitée (ici, # BADA55)
Ça n'a pas marché pour moi. Je ne peux pas dire pourquoi, j'ai copié collé exactement
Vic Seedoubleyew
@VicSeedoubleyew l'extrait fonctionne correctement. Inspectez votre div à l'aide des outils de développement pour vous assurer que votre CSS est réellement appliqué. Assurez-vous également que l'URL de votre image est valide si vous n'utilisez pas celle que j'ai fournie. EDIT: si l'extrait ne fonctionne pas pour vous, vous utilisez peut-être un navigateur obsolète ou ne prenant pas en charge la fonction de gradient linéaire.
rolznz
5
Répondre parce que je cherchais une solution pour cela.
le stylo dans la réponse @chrscblls fonctionne bien si vous avez un fond blanc ou noir, mais pas le mien. De plus, les images ont été générées avec ng-repeat, donc je ne pouvais pas avoir leur URL dans mon css ET vous ne pouvez pas utiliser :: after sur les balises img.
J'ai donc pensé à contourner le problème et j'ai pensé que cela pourrait aider les gens s'ils trébuchent trop ici.
Donc ce que j'ai fait est à peu près la même chose avec trois différences principales:
l'url étant dans ma balise img, je l'ai mise (et une étiquette) dans une autre div sur laquelle :: after fonctionnera.
le «mode mix-blend» est réglé sur «différence» au lieu de «multiplier» ou «écran».
J'ai ajouté un :: before avec exactement la même valeur pour que le :: after fasse la 'différence' de la 'différence' faite par le :: before et l'annule lui-même.
Pour le faire passer du noir au blanc ou du blanc au noir, la couleur d'arrière-plan doit être blanche. Du noir aux couleurs, vous pouvez choisir n'importe quelle couleur. Du blanc aux couleurs, vous devrez choisir la couleur opposée à celle que vous souhaitez.
Il n'y a pas besoin d'un jeu de polices complet si vous n'avez besoin que d'une seule icône, et je pense qu'il est plus "propre" en tant qu'élément individuel. Donc, à cette fin, en HTML5, vous pouvez placer un SVG directement dans le flux de documents. Ensuite, vous pouvez définir une classe dans votre feuille de style .CSS et accéder à sa couleur d'arrière-plan avec la fillpropriété:
Notez que, dans l'exemple, j'ai utilisé :hoverpour illustrer le comportement; si vous voulez juste changer la couleur pour l'état "normal", vous devez supprimer la pseudoclasse.
Pour changer littéralement la couleur, vous pouvez incorporer une transition CSS avec un filtre -webkit où, lorsque quelque chose se produit, vous invoquerez le filtre -webkit de votre choix. Par exemple:
Lorsque vous changez une image du noir au blanc ou du blanc au noir, le filtre de rotation de teinte ne fonctionne pas, car le noir et le blanc ne sont pas techniquement des couleurs. Au lieu de cela, les changements de couleur noir et blanc (du noir au blanc ou vice-versa) doivent être effectués avec la propriété de filtre inversé.
background-colorpropriété CSS. Vous pouvez créer une partie non transparente qui sera fixe et une partie transparente de l'image qui sera remplie par n'importe quelle couleur que vous souhaitez via CSS. Est-ce ce que vous souhaitez réaliser?Réponses:
Vous pouvez utiliser des filtres avec
-webkit-filteretfilter: Les filtres sont relativement nouveaux pour les navigateurs mais pris en charge dans plus de 90% des navigateurs selon le tableau CanIUse suivant: https://caniuse.com/#feat=css-filtersVous pouvez changer une image en niveaux de gris, sépia et bien plus encore (regardez l'exemple).
Vous pouvez donc maintenant changer la couleur d'un fichier PNG avec des filtres.
La source
la source
.gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }qui signifie que vous pouvez passer du noir et transparent ou des niveaux de gris à la couleur et cela fonctionne même sur les gifs animésJ'ai trouvé cet excellent exemple de codepen que vous insérez votre valeur de couleur hexadécimale et il retourne le filtre nécessaire pour appliquer cette couleur au png
Générateur de filtres CSS pour convertir du noir en couleur hexadécimale cible
par exemple, j'avais besoin que mon png ait la couleur suivante # 1a9790
alors vous devez appliquer le filtre suivant à votre png
la source
filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);Vous voudrez peut-être jeter un œil aux polices Icon. http://css-tricks.com/examples/IconFont/
EDIT: J'utilise Font-Awesome sur mon dernier projet. Vous pouvez même l'amorcer. Mettez simplement ceci dans votre
<head>:Et puis allez-y et ajoutez des liens d'icônes comme celui-ci:
Voici la feuille de triche complète
--Éditer--
Font-Awesome utilise différents noms de classe dans la nouvelle version, probablement parce que cela rend les fichiers CSS considérablement plus petits et pour éviter les classes CSS ambiguës. Alors maintenant, vous devez utiliser:
EDIT 2:
Je viens de découvrir que github utilise également sa propre police d'icônes: Octicons. Il est gratuit à télécharger. Ils ont également quelques conseils sur la façon de créer vos propres polices d'icônes .
la source
J'ai pu le faire en utilisant un filtre SVG. Vous pouvez écrire un filtre qui multiplie la couleur de l'image source par la couleur que vous souhaitez modifier. Dans l'extrait de code ci-dessous, flood-color est la couleur dans laquelle nous voulons changer la couleur de l'image (qui est rouge dans ce cas). FeComposite indique au filtre comment nous traitons la couleur. La formule pour feComposite avec arithmétique est (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4) où i1 et i2 sont les couleurs d'entrée pour in / in2 en conséquence. Donc, en spécifiant uniquement k1 = 1, cela ne fera que i1 * i2, ce qui signifie multiplier les deux couleurs d'entrée ensemble.
Remarque: Cela ne fonctionne qu'avec HTML5 car il utilise le SVG en ligne. Mais je pense que vous pourriez faire fonctionner cela avec un navigateur plus ancien en plaçant SVG dans un fichier séparé. Je n'ai pas encore essayé cette approche.
Voici l'extrait:
la source
La balise img a une propriété d'arrière-plan comme les autres. Si vous avez un PNG blanc avec une forme transparente, comme un pochoir, vous pouvez le faire:
la source
Oui :)
la source
Dans la plupart des navigateurs , vous pouvez utiliser des filtres:
sur les
<img>éléments et les images d'arrière-plan d'autres élémentset définissez-les soit statiquement dans votre CSS, soit dynamiquement en utilisant JavaScript
Voir les démos ci-dessous.
<img>élémentsVous pouvez appliquer cette technique à un
<img>élément:Images de fond
Vous pouvez appliquer cette technique à une image d'arrière-plan:
Javascript
Vous pouvez utiliser JavaScript pour définir un filtre lors de l'exécution:
la source
hue-rotatene fonctionne pas sur le blanc.Je pense avoir une solution pour cela qui est a) exactement ce que vous cherchiez il y a 5 ans, et b) est un peu plus simple que les autres options de code ici.
Avec n'importe quel png blanc (par exemple, icône blanche sur fond transparent), vous pouvez ajouter un sélecteur :: after pour recolorer.
Voir ce codepen (application de l'échange de couleurs au survol): http://codepen.io/chrscblls/pen/bwAXZO
la source
La ligne la plus simple qui a fonctionné pour moi:
Vous pouvez régler l'opacité de 0 à 1 pour éclaircir ou assombrir la couleur.
la source
J'ai trouvé ça en cherchant sur Google, j'ai trouvé qu'il valait mieux travailler pour moi ...
HTML
CSS
http://jsfiddle.net/a63b0exm/
la source
J'avais besoin d'une couleur spécifique, donc le filtre ne fonctionnait pas pour moi.
Au lieu de cela, j'ai créé un div, en exploitant plusieurs images d'arrière-plan CSS et la fonction de gradient linéaire (qui crée une image elle-même). Si vous utilisez le mode de fusion de superposition, votre image réelle sera mélangée avec l'image "dégradée" générée contenant la couleur souhaitée (ici, # BADA55)
la source
Répondre parce que je cherchais une solution pour cela.
le stylo dans la réponse @chrscblls fonctionne bien si vous avez un fond blanc ou noir, mais pas le mien. De plus, les images ont été générées avec ng-repeat, donc je ne pouvais pas avoir leur URL dans mon css ET vous ne pouvez pas utiliser :: after sur les balises img.
J'ai donc pensé à contourner le problème et j'ai pensé que cela pourrait aider les gens s'ils trébuchent trop ici.
Donc ce que j'ai fait est à peu près la même chose avec trois différences principales:
Pour le faire passer du noir au blanc ou du blanc au noir, la couleur d'arrière-plan doit être blanche. Du noir aux couleurs, vous pouvez choisir n'importe quelle couleur. Du blanc aux couleurs, vous devrez choisir la couleur opposée à celle que vous souhaitez.
https://codepen.io/spaceplant/pen/oZyMYG
la source
Il n'y a pas besoin d'un jeu de polices complet si vous n'avez besoin que d'une seule icône, et je pense qu'il est plus "propre" en tant qu'élément individuel. Donc, à cette fin, en HTML5, vous pouvez placer un SVG directement dans le flux de documents. Ensuite, vous pouvez définir une classe dans votre feuille de style .CSS et accéder à sa couleur d'arrière-plan avec la
fillpropriété:Violon de travail: http://jsfiddle.net/qmsj0ez1/
Notez que, dans l'exemple, j'ai utilisé
:hoverpour illustrer le comportement; si vous voulez juste changer la couleur pour l'état "normal", vous devez supprimer la pseudoclasse.la source
Pour changer littéralement la couleur, vous pouvez incorporer une transition CSS avec un filtre -webkit où, lorsque quelque chose se produit, vous invoquerez le filtre -webkit de votre choix. Par exemple:
la source
Lorsque vous changez une image du noir au blanc ou du blanc au noir, le filtre de rotation de teinte ne fonctionne pas, car le noir et le blanc ne sont pas techniquement des couleurs. Au lieu de cela, les changements de couleur noir et blanc (du noir au blanc ou vice-versa) doivent être effectués avec la propriété de filtre inversé.
.img1 { filter: invert(100%); }la source
Source: https://codepen.io/taryaoui/pen/EKkcu
la source