Changer la couleur de L'image PNG via CSS?
Étant donné un PNG transparent affichant une forme simple en blanc, est-il possible de changer la couleur de ceci via CSS? Une sorte de superposition ou quoi pas?
12 réponses
Vous pouvez utiliser des filtres avec -webkit-filter et filter:
Les filtres sont très nouveaux pour les navigateurs et ne sont pris en charge que dans les navigateurs très modernes.
Vous pouvez changer une image en niveaux de gris, sépia et beaucoup plus (regardez l'exemple).
Ainsi, vous pouvez 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 oeil aux polices D'icônes. http://css-tricks.com/examples/IconFont/
EDIT: j'utilise Font-Awesome sur mon dernier projet. Vous pouvez même le bootstrap. Suffit de mettre ceci 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 quelques icon-links comme ceci:
<a class="icon-thumbs-up"></a>
Voici la feuille de triche complète
-- modifier--
Font-Awesome utilise différents noms de classe dans la nouvelle version, probablement parce que cela rend les fichiers CSS considérablement plus petit, et pour éviter les classes CSS ambiguës. Alors maintenant, vous devriez utiliser:
<a class="fa fa-thumbs-up"></a>
Édition 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 aussi quelques conseils sur comment créer votre propre icône polices.
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, alors vous pouvez le faire:
<img src= 'stencil.png' style= 'background-color: red'>
Oui :)
Surfin 'Safari-Blog Archive" masques CSS
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 modèle qui peut être utilisé pour masquer des parties de la boîte dans l'affichage final. En d'autres termes, vous pouvez découper des formes complexes basés sur l'alpha d'une image.
[...]
Nous avons introduit de nouvelles propriétés pour fournir aux concepteurs Web beaucoup de contrôle sur ces masques et comment ils sont appliquer. Les 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)
J'ai pu le faire en utilisant le filtre SVG. Vous pouvez écrire un filtre qui multiplie la couleur de l'image source avec la couleur que vous souhaitez modifier. Dans l'extrait de code ci-dessous, inondation-color est la couleur que 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 de feComposite avec arithmétique est (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4) où i1 et i2 sont des couleurs d'entrée pour in/in2 en conséquence. Donc en spécifiant seulement k1=1 signifie qu'il fera juste 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 être en mesure de faire fonctionner cela avec un navigateur plus ancien en mettant SVG dans un fichier séparé. Je n'ai pas encore essayé cette approche.
Voici l'extrait:
<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>Dans la plupart des navigateurs, vous pouvez utiliser des filtres :
-
Sur les éléments
<img>et les images d'arrière-plan des autres éléments -
Et définissez-les 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 <img> élément :
#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 d'arrière-plan
Vous pouvez postuler 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 à 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>Pense que j'ai 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 */
}
Voir ce codepen (appliquer le swap de couleur sur hover): http://codepen.io/chrscblls/pen/bwAXZO
J'ai trouvé ce grand exemple de codepen que vous insérez votre valeur Hex color et qu'il renvoie le filtre nécessaire pour appliquer cette couleur à png
Générateur de filtre CSS pour convertir du noir à la couleur hexadécimale cible
Par exemple, j'avais besoin de mon png pour avoir la couleur suivante #1a9790
Ensuite, vous devez appliquer le filtre suivant à votre png
filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
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, exploitant plusieurs images D'arrière-plan CSS et la fonction linear-gradient (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é" générée contenant la couleur désiré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>Il n'y a pas besoin d'un ensemble de polices entier si vous avez seulement besoin d'une icône, plus je pense qu'il est plus "propre" en tant qu'élément individuel. Ainsi, à cette fin, en HTML5, vous pouvez placer un SVG directement dans le flux de document. Ensuite, vous pouvez définir une classe dans votre .CSS stylesheet et accéder à sa couleur d'arrière-plan avec la propriété fill:
Violon de travail: http://jsfiddle.net/qmsj0ez1/
Remarque que, dans l'exemple, j'ai utilisé :hoverpour illustrer le comportement; si vous voulez juste pour changement de couleur pour l'état "normal", vous devez supprimer le pseudoclass.
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. aussi, 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.
Donc, j'ai pensé qu'un travail autour et pensé que cela pourrait aider les gens s'ils trébuchent aussi ici.
Donc ce que j'ai fait est à peu près la même chose avec trois différences principales:
- le url étant dans ma balise img, Je l'ai mis (et une étiquette) dans un autre div sur lequel ::after fonctionnera.
- le "mix-blend-mode" est réglé à "la différence" au lieu de "multiplier" ou "écran".
- j'ai ajouté un:: before avec exactement la même valeur, donc le:: after ferait la 'différence' de la 'différence' faite par le:: before et l'annulerait.
Pour le changer 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 quelle que soit la couleur. Du blanc aux couleurs tho, vous devrez choisir la couleur opposée de celle que vous voulez.
.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: "";
}
Pour changer littéralement la couleur, vous pouvez incorporer une transition CSS avec un-webkit-filter où, quand quelque chose se passe, vous invoquez le-webkit-filter de votre choix. Par exemple:
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}