web-dev-qa-db-fra.com

Existe-t-il un moyen de coloriser une image PNG blanche avec CSS uniquement?

Je sais qu'il existe de nombreux filtres CSS, en particulier pour le webkit, mais je ne trouve pas de solution pour coloriser une image blanche (#FFFFFF). J'ai essayé une combinaison de filtres, mais aucun d'entre eux ne colorise mon image. Je ne peux changer l'image que dans la gamme de niveaux de gris ou sépia.

Donc, ma question est: existe-t-il un moyen de changer mon png totalement blanc en (par exemple) rouge en utilisant uniquement CSS?

Comme indiqué sur cette image:

enter image description here

csscolorscss-filters
21
Balázs Varga

Cela peut être fait avec le masquage CSS, mais malheureusement, le support du navigateur est vraiment mauvais (je crois que le webkit uniquement).

http://jsfiddle.net/uw1mu81k/1/

-webkit-mask-box-image: url(http://yourimagehere);

Parce que votre image est entièrement blanche, c'est un candidat parfait pour le masquage. La façon dont le masque fonctionne est que partout où l'image est blanche, l'élément d'origine est affiché comme normal, où noir (ou transparent) l'élément d'origine n'est pas affiché. Tout ce qui se trouve au milieu a un certain niveau de transparence.

[~ # ~] éditez [~ # ~] :

Vous pouvez également le faire fonctionner dans FireFox avec une légère aide de svg.

http://jsfiddle.net/uw1mu81k/4/

div {
  width: 50px;
  height: 50px;
  mask: url(#mymask);
  -webkit-mask-box-image: url(http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png);
}
<div style="background-color: red;"></div>
<div style="background-color: blue;"></div>
<div style="background-color: green;"></div>
<div style="background-color: orange;"></div>
<div style="background-color: purple;"></div>

<svg height="0" width="0">
  <mask id="mymask">
    <image id="img" xlink:href="http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png" x="0" y="0" height="50px" width="50px" />
  </mask>
</svg>
22
James Montagne

J'ai récemment posé la même question et je pense que cette approche mérite d'être partagée pour les futurs lecteurs. Essaye ça

filter: brightness(50%) sepia(100) saturate(100) hue-rotate(25deg);

La luminosité assombrira l'image, la sépia la rendra un peu jaunâtre, saturée pour augmenter la couleur et enfin la teinte-rotation pour changer la couleur. Cependant, il n'est pas compatible avec tous les navigateurs:

  • Il n'est pas pris en charge sur IE

  • Sur Chrome, hue-rotate(25deg) rendra toute image rouge, mais vous avez besoin d'une valeur négative dans Firefox, par exemple hue-rotate(-25deg) pour le rendre rouge.
    Vous pouvez l'utiliser pour cibler les navigateurs mozilla: https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/

Voici quelques conseils et outils utiles que j'ai utilisés lorsque je travaille avec des images/icônes à l'aide de CSS:

  • Si vous avez la version svg de l'image, vous pouvez les convertir en icônes de police en utilisant cet outil https://icomoon.io/ . Pour changer de couleur, vous avez juste besoin de color:#f00; Tout comme les couleurs de police.
  • Si vous devez obtenir cet effet pour un état de vol stationnaire, utilisez une image rouge avec filter: brightness(0) invert(); en état de non vol stationnaire et filter: brightness(1); en état de vol stationnaire. Cependant, cela ne fonctionnera toujours pas sur IE
  • Utilisez une feuille Sprite. Vous pouvez vous créer à l'aide de l'outil d'édition d'image ou utiliser des générateurs de feuilles Sprite disponibles en ligne. Ensuite, vous pouvez utiliser SpriteCow pour obtenir le CSS pour chaque sous-image de votre feuille de sprites.
16
zekkai

Cela peut être fait avec un filtre CSS qui référence un filtre SVG (navigateurs webkit + firefox). Voici le filtre SVG.

<svg width="800px" height="600px">
  <filter id="redden">
    <feColorMatrix type="matrix" values="1 1 1 0 0 
                                         0 0 0 0 0 
                                         0 0 0 0 0 
                                         0 0 0 1 0"/>
  </filter>

<image filter="url(#redden)" width="190" height="400" preserveAspectRatio="xMinYMin slice"  xlink:href="http://i.stack.imgur.com/e6MUC.jpg"/>
</svg>
2
Michael Mullany

j'ai essayé de colorer mon image de nuage blanc en suivant la réponse de @ zekkai, puis j'ai écrit un générateur de filtres.

var slider_huerotate = document.getElementById("slider_huerotate");
var slider_brightness = document.getElementById("slider_brightness");
var slider_saturate = document.getElementById("slider_saturate");
var slider_sepia = document.getElementById("slider_sepia");

var output = document.getElementById("demo");
var cloud =  document.getElementById('cloud');
let [brightness , sepia, saturate, huerotate] = ["100", "80", "100","360"];
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
output.innerHTML = filtercolor; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
slider_huerotate.oninput = function() {
huerotate = this.value;
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}

slider_brightness.oninput = function() {
brightness = this.value;
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}

slider_sepia.oninput = function() {
sepia = this.value;
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}

slider_saturate.oninput = function() {
saturate = this.value;
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}
.slider {
    -webkit-appearance: none;
    width: 350px;
    height: 15px;
    border-radius: 5px;   
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

img{
  width:300px;
  z-index:100;
  filter: brightness(100%) sepia(80) saturate(100) hue-rotate(360deg);
  padding:70px 25px 50px 25px;
}

.wrapper{
  width:600px;
  height:500px;
  padding:50px;
  font-size:small;
}

.slidecontainer_vertical{
    margin-top: 50px;
   transform: translate(0,300px) rotate(270deg);
  -moz-transform: rotate(270deg);

}

.left{
  width:50px;
  height:300px;
  float:left;
}

.cloud{
  width:100%;
}

.middle{
  width:350px;
  height:300px;
  float:left;
  margin:0 auto;
}

.right{
  width:50px;
  height:300px;
  float:left;
}

#demo{
  width:100%;
  text-align:center;
  padding-bottom:20px;
  font-family: 'Handlee', cursive;
  }
<head>
<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
</head>
<div class="wrapper">
<div class='left'>
<div class="slidecontainer_vertical">
  <input type="range" min="0" max="360" value="360" class="slider" id="slider_huerotate">
</div></div>
  <div class=middle>
<div class="slidecontainer">
  <input type="range" min="0" max="100" value="100" class="slider" id="slider_brightness">
</div>
<div id='cloud'>
<img src="https://docs.google.com/drawings/d/e/2PACX-1vQ36u4x5L_01bszwckr2tAGS560HJtQz4qblj0jnvFUPSgyM9DAh7z_L3mmDdF6XRgu8FkTjqJKSNBQ/pub?w=416&amp;h=288"></div>
    <div id='demo'></div>
<div class="slidecontainer">
  <input type="range" min="0" max="100" value="80" class="slider" id="slider_sepia">
</div>
  </div>
<div class='right'>
<div class="slidecontainer_vertical">
  <input type="range" min="0" max="100" value="100" class="slider" id="slider_saturate">
</div></div>
</div>
1
once