Changer la couleur de l'image PNG via CSS?
Avec 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 pas?
Vous pouvez utiliser les filtres avec -webkit-filter et filter: les filtres sont très nouveaux pour les navigateurs et ne sont pris en charge que par les navigateurs très modernes. Vous pouvez modifier une image en niveaux de gris, sépia, etc. (consultez 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="http://i.stack.imgur.com/OyP0g.jpg" title="original">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="rss opacity">Vous voudrez 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 bootstrap it. Mettez ceci simplement dans votre <head>:
<link href="//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="//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ône comme ceci:
<a class="icon-thumbs-up"></a>
Voici le aide-mémoire complet
--modifier--
Font-Awesome utilise différents noms de classe dans la nouvelle version, probablement parce que cela réduit considérablement la taille des fichiers CSS et évite les classes CSS ambiguës. Alors 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. Ils ont également quelques conseils sur comment créer vos propres polices d’icônes .
J'ai trouvé cet excellent exemple de codepen dans lequel vous insérez votre valeur de couleur hex et renvoie le filtre nécessaire pour appliquer cette couleur à png
Générateur de filtre CSS pour convertir du noir en couleur hexadécimale cible
par exemple j'avais besoin de mon png pour avoir la couleur suivante # 1a9790
alors vous devez appliquer le filtre suivant à vous png
filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
La balise img a une propriété d'arrière-plan comme n'importe quelle autre. Si vous avez un fichier PNG blanc avec une forme transparente, comme un pochoir, procédez comme suit:
<img src= 'stencil.png' style= 'background-color: red'>
J'ai pu faire cela en utilisant un filtre SVG. Vous pouvez écrire un filtre qui multiplie la couleur de l'image source par la couleur à modifier. Dans l'extrait de code ci-dessous, flood-color est la couleur à laquelle nous souhaitons 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, spécifier uniquement k1 = 1 signifie que 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 SVG en ligne. Mais je pense que vous pourrez peut-être utiliser ce navigateur plus ancien en plaçant SVG dans un fichier séparé. Je n'ai pas encore essayé cette approche.
Voici l'extrait de code:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
<defs>
<filter id="colorMask1">
<feFlood flood-color="#ff0000" result="flood" />
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask1)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
<defs>
<filter id="colorMask2">
<feFlood flood-color="#00ff00" result="flood" />
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask2)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
<defs>
<filter id="colorMask3">
<feFlood flood-color="#0000ff" result="flood" />
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" />
</svg>Oui :)
Surfin 'Safari - Archive du blog "Masques CSS
WebKit prend désormais en charge les masques alpha en CSS. Les masques vous permettent de superposer au contenu d'une boîte un motif pouvant ê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 à partir de l'alpha d'une image.
[...]
Nous avons introduit de nouvelles propriétés pour fournir aux concepteurs Web un contrôle important sur ces masques et sur la manière dont ils sont appliqués. Les nouvelles propriétés sont analogues aux propriétés d’arrière-plan et de bordure-image déjà existantes.-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)
Dans la plupart des navigateurs , vous pouvez utiliser des filtres:
sur les deux éléments
<img>et les images d'arrière-plan d'autres élémentset les définir soit statiquement dans votre CSS, soit dynamiquement en utilisant JavaScript
Voir les démos ci-dessous.
<img> éléments
Vous pouvez appliquer cette technique à un élément <img>:
#original, #changed {
width: 45%;
padding: 2.5%;
float: left;
}
#changed {
-webkit-filter : hue-rotate(180deg);
filter : hue-rotate(180deg);
}<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />
<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />Images de fond
Vous pouvez appliquer cette technique à une image d’arrière-plan:
#original, #changed {
background: url('http://i.stack.imgur.com/kaKzj.jpg');
background-size: cover;
width: 30%;
margin: 0 10% 0 10%;
padding-bottom: 28%;
float: left;
}
#changed {
-webkit-filter : hue-rotate(180deg);
filter : hue-rotate(180deg);
}<div id="original"></div>
<div id="changed"></div>JavaScript
Vous pouvez utiliser JavaScript pour définir un filtre au moment de l'exécution:
var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;#original, #changed {
margin: 0 10%;
width: 30%;
float: left;
background: url('http://i.stack.imgur.com/856IQ.png');
background-size: cover;
padding-bottom: 25%;
}<div id="original"></div>
<div id="changed"></div>Pensez que j'ai une solution pour cela qui est a) exactement ce que vous recherchiez 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, une icône blanche sur un 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 */
}
Voir ce code (appliquant l’échange de couleur en survol): http://codepen.io/chrscblls/pen/bwAXZO
J'ai trouvé cela en googlant, j'ai trouvé le meilleur travail pour moi ...
HTML
<div class="img"></div>
CSS
.img {
background-color: red;
width: 60px;
height: 60px;
-webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}
La ligne la plus simple qui a fonctionné pour moi:
filter: opacity(0.5) drop-shadow(0 0 0 blue);
Vous pouvez régler l'opacité de 0 à 1 pour rendre la couleur plus claire ou plus sombre.
J'avais besoin d'une couleur spécifique, le filtre ne fonctionnait donc pas pour moi.
Au lieu de cela, j'ai créé un div, exploitant plusieurs images d'arrière-plan CSS et la fonction de dégradé linéaire (qui crée une image elle-même). Si vous utilisez le mode de fusion par superposition, votre image réelle sera fusionnée avec l'image "en dégradé" générée contenant la couleur souhaitée (ici, # BADA55).
.colored-image {
background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png");
background-blend-mode: overlay;
background-size: contain;
width: 200px;
height: 200px;
}<div class="colored-image"></div>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 le mien ne l’était pas. De plus, les images ont été générées avec ng-repeat, je ne pouvais donc pas avoir leur URL dans mon css ET vous ne pouvez pas utiliser :: after sur les balises img.
Donc, j'ai imaginé un travail autour et pensé que cela pourrait aider les gens s'ils trébuchent eux aussi.
Donc, ce que j'ai fait est à peu près la même chose avec trois différences principales:
- l'URL étant dans mon tag img, je le mets (et une étiquette) dans un autre div sur lequel: after travaillera.
- le "mode mixte" est défini sur "différence" au lieu de "multiplier" ou "écran".
- J'ai ajouté un :: before avec exactement la même valeur pour que :: after fasse la "différence" de la "différence" faite par le :: before et l'annule.
Pour 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.
.divClass{
position: relative;
width: 100%;
height: 100%;
text-align: left;
}
.divClass:hover::after, .divClass:hover::before{
position: absolute;
width: 100%;
height: 100%;
background: #FFF;
mix-blend-mode: difference;
content: "";
}
Il n'est pas nécessaire de disposer d'un jeu de polices complet si vous n'avez besoin que d'une seule icône. De plus, je pense qu'elle est plus "propre" en tant qu'élément individuel. Pour cela, vous pouvez placer un fichier SVG directement dans le flux de documents en HTML5. Vous pouvez ensuite définir une classe dans votre feuille de style .CSS et accéder à sa couleur d’arrière-plan avec la propriété fill:
Le violon en marche: http://jsfiddle.net/qmsj0ez1/
Notez que, dans l'exemple, j'ai utilisé :hover pour illustrer le comportement. si vous souhaitez simplement changer de couleur pour l'état "normal", vous devez supprimer la pseudo-classe.
Pour changer littéralement la couleur, vous pouvez incorporer une transition CSS à un filtre -webkit où, lorsque quelque chose se produit, vous invoquerez le filtre -webkit-filtre de votre choix. Par exemple:
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}