Étant donné un PNG transparent affichant une forme simple en blanc, est-il possible de changer la couleur de celle-ci par le biais de CSS ? Une sorte de superposition ou autre ?
Vous pouvez utiliser des filtres avec -webkit-filter et filter : Les filtres sont relativement nouveaux pour les navigateurs, mais ils sont pris en charge par plus de 90 % d'entre eux, selon le tableau CanIUse suivant : https://caniuse.com/#feat=css-filters
Vous pouvez changer une image en niveaux de gris, en sépia et bien plus encore (regardez l'exemple).
Vous pouvez donc maintenant changer la couleur d'un fichier PNG avec des filtres.
body {
background-color:#03030a;
min-width: 800px;
min-height: 400px
}
img {
width:20%;
float:left;
margin:0;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }
<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity"><a href="http://codepen.io/rss/pen/ftnDd" rel="noreferrer">Source :</a>
La réponse courte est qu'il n'y a pas de solution générale pour la majorité des navigateurs.
Mais est-ce que l'huerotate ou la saturation vont réellement faire quelque chose à une image blanche ?
Mise à jour de 2016 : cela fonctionne désormais dans presque tous les navigateurs, sauf IE : caniuse.com/#feat=css-filters
Vous devriez peut-être jeter un coup d'œ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. Il suffit de mettre ceci dans votre <head> :
<link href="http://stackoverflow.com//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 -->
<link href="http://stackoverflow.com//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">Et ensuite, ajoutez des liens-icônes comme ceci :
<a class="icon-thumbs-up"></a>Voici le feuille de triche complète
--edit--
Font-Awesome utilise des noms de classe différents dans la nouvelle version, probablement parce que cela permet de réduire considérablement la taille des fichiers CSS et d'éviter les classes CSS ambiguës. Donc maintenant vous devriez utiliser :
<a class="fa fa-thumbs-up"></a>EDIT 2 :
Je viens de découvrir que Github utilise également sa propre police d'icônes : Octicons Le téléchargement est gratuit. Il contient également des conseils sur comment créer vos propres polices d'icônes .
+1 pour les idées originales. De nos jours, il existe des applications en ligne faciles à utiliser pour vous aider à créer une police Web à partir d'une image (svg).
Si <a class="icon-thumbs-up"></a> est l'ancien nom de classe et <a class="fa-thumbs-up"></a> est le nouveau, je ne pense pas que cela rende le CSS plus petit, je peux voir un espace blanc supplémentaire entre fa et fa-thumbs-up, ajouter au moins 1 octet supplémentaire sur ce fichier CSS si je ne me trompe pas ?
Oui :)
Surfin' Safari - Blog Archive " Masques CSS
WebKit prend désormais en charge les masques alpha dans les CSS. Les masques vous permettent de superposer le contenu d'une boîte avec un motif qui peut être utilisé pour éliminer des parties de cette boîte dans l'affichage final. En d'autres termes, vous pouvez découper des formes complexes à partir de l'alpha d'une image.
[...]
Nous avons introduit de nouvelles propriétés pour permettre aux concepteurs de sites Web de mieux contrôler ces masques et la façon dont ils sont appliqués. Ces nouvelles propriétés sont analogues aux propriétés background et border-image qui existent déjà.-webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image)
Est-ce que cela fait partie d'une norme (à venir), car je n'ai pas trouvé d'informations sans rapport avec Webkit, ou est-ce juste un goût d'Apple ? Il semble que le W3 suggère SVG pour de tels cas d'utilisation : w3.org/TR/SVG/masking.html
La meilleure solution que j'ai trouvée jusqu'à présent. Dommage qu'elle ne fonctionne que si vous utilisez une couleur de fond unie sur vos sites web.
@Wesley vous devez alors inverser l'image (pour que le blanc devienne transparent et le reste blanc) ce que vous pouvez faire en utilisant votre éditeur d'image préféré et des masques.
Il n'est pas nécessaire d'avoir un jeu de polices complet si vous n'avez besoin que d'une seule icône, et j'ai l'impression qu'elle est plus "propre" en tant qu'élément individuel. Donc, à cette fin, en HTML5, vous pouvez placer un SVG directement dans le flux du document. Vous pouvez ensuite définir une classe dans votre feuille de style .CSS et accéder à sa couleur d'arrière-plan à l'aide de la balise fill propriété :
Violon de travail : http://jsfiddle.net/qmsj0ez1/
Notez que, dans l'exemple, j'ai utilisé :hover pour illustrer le comportement ; si vous voulez simplement changer de couleur pour l'état "normal", vous devez supprimer la pseudoclasse.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
9 votes
Vous pouvez définir
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 de la couleur de votre choix via CSS. Est-ce que c'est ce que vous voulez réaliser ?2 votes
@qbk, cela mérite une réponse, pas seulement un commentaire. Et vous me battez d'une seconde, techniquement.
2 votes
Vous pouvez utiliser des psuedo-éléments avec un mode de mélange pour recolorer toute icône qui est 100% noire ou 100% blanche (le fond reste transparent). Voir ma réponse ici : stackoverflow.com/a/39796437/1472114
2 votes
Pour ceux qui recherchent une réponse réelle et actualisée qui n'implique pas ces affreux "filtres" qui ne sont absolument pas destinés à cela, ne cherchez pas plus loin : stackoverflow.com/a/32736304/671092 Vous pouvez sauter le reste : vous êtes les bienvenus.