544 votes

Changer la couleur d'une image PNG via CSS ?

É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 ?

5 votes

Vous pouvez définir background-color Proprié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

641voto

ravitadi Points 683

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>

13 votes

La réponse courte est qu'il n'y a pas de solution générale pour la majorité des navigateurs.

21 votes

Mais est-ce que l'huerotate ou la saturation vont réellement faire quelque chose à une image blanche ?

6 votes

Mise à jour de 2016 : cela fonctionne désormais dans presque tous les navigateurs, sauf IE : caniuse.com/#feat=css-filters

59voto

Jules Colle Points 2482

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 votes

Font Awesome fait honneur à son nom.

1 votes

+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).

0 votes

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 ?

22voto

Cyril Points 525

La balise img possède une propriété background comme toutes les autres. Si vous avez un PNG blanc avec une forme transparente, comme un pochoir, vous pouvez le faire :

<img src= 'stencil.png' style= 'background-color: red'>

155 votes

Je veux que la partie blanche soit colorée différemment, pas la partie transparente.

2 votes

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.

8 votes

@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.

22voto

benhowdle89 Points 11053

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)

1 votes

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

3 votes

Malheureusement, cela semble être réservé à webkit et le blog triche en utilisant des images composées plutôt que des exemples réels. Cette réponse est un peu un faux-fuyant.

3voto

Pere Points 392

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.com

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.

Powered by:

X