background-color ignores transparent content?

Question

I have the image which has filled content and transparent content. I want to get background-color but only for filled content (ignores transparent) Is it possible? Can I do something like that instead?

My project: can be seen here

$("#hairbutton").click(function() {
  var haircolor = $('#haircolorinput').val();
  $(".img-wrap#hair img").css("background-color", haircolor);
});
$("#facebutton").click(function() {
  var facecolor = $('#facecolorinput').val();
  $(".img-wrap#face img").css("background-color", facecolor);
});

@-webkit-keyframes head {
  from {
    top: 0px;
  }
  to {
    top: 1px;
  }
}
@keyframes head {
  from {
    top: 0px;
  }
  to {
    top: 1px;
  }
}
#head {
  position: relative;
  -webkit-animation: head 1.5s infinite;
  animation: head 1.5s infinite;
}
.img-wrap {
  width: 153px;
  height: 78px;
  overflow: hidden;
  width: 90px;
  height: 60px;
  clear: both;
}
.img-wrap img {
  width: 90px;
  height: 60px;
  background-color: green;
}
input {
  padding: 5px;
  border-radius: 5px;
  border: 2px solid black;
  float: left;
  height: 18px;
}
input:focus {
  outline: 0;
}
#go {
  padding: 5px;
  border: 2px solid black;
  width: auto;
  display: table;
  border-radius: 5px;
  float: left;
  height: 10px;
  margin-left: 5px;
  cursor: pointer;
  height: 33px;
}
#face {
  position: relative;
  bottom: 35px;
  left: 35px;
}
.form {
  float: left;
  clear: both;
}
button {
  position: relative;
  left: 5px;
  top: 5px;
}
.clear {
  clear: both;
}

<div class="form">
  <input id="haircolorinput" name="haircolor" type="text" placeholder="Hair HEX">
  <button id="hairbutton">Change</button>
</div>
<div class="form">
  <input style="margin-top: 5px; margin-bottom: 50px;" id="facecolorinput" name="facecolor" type="text" placeholder="Face HEX">
  <button id="facebutton">Change</button>
</div>
<div class="clear"></div>
<div id="head">
  <div class="img-wrap" id="hair" style="z-index: -100;">
    <img src="http://i.imgur.com/mz3GRLl.png" alt="" />
  </div>
  <div class="img-wrap" id="face" style="z-index: 100; width: 36px; height: 36px;">
    <img src="http://i.imgur.com/DiHXscR.png" alt="" style="width: 36px; height: 36px;" />
  </div>
</div>

What you want is a mask for your image. Maybe you can try something nice with this package: http://almogbaku.github.io/imageMask/ — Marnix, Dec 30 '14 at 13:10
Please copy the relevant parts of the code into your question and explain what exactly you want to achieve. — Aaron Digulla, Dec 30 '14 at 13:10
you'd want to possibly look at [image mapping](http://stackoverflow.com/a/2607210/3436942) — jbutler483, Dec 30 '14 at 13:14
@jbutler: Don't just paste all the code in here; please reduce it to the relevant parts. — Aaron Digulla, Dec 30 '14 at 13:15
@AaronDigulla: You can't really reduce that much further without loosing its integrity. I was actually adding the link correctly, but it required a code snippet (so rather than editing it, which could be a mis-interpretation of what the OP was asking), they may or may not **want** to reduce it. I'm not going around editing peoples code? — jbutler483, Dec 30 '14 at 13:19
Take a look at http://stackoverflow.com/help/mcve. JSFiddles are great, so +1, but you always want to include relevant parts of your code in your question as that link might not always exist, but your SO questions will (hopefully) be around a long long time. — Phil Tune, Dec 30 '14 at 16:05
Could be duplicate of: http://stackoverflow.com/q/7415872/3999748? — Persijn, Feb 12 '15 at 12:19

Persijn · Accepted Answer · 2015-02-12T12:21:39.020

To answer your question No, but you can sett a background-color to and image so that the background shows on the transparent part of you image instead:

tl;dr There are multiple ways of changing parts of an image/object. I think the easiest way is with an svg embedded image/object. and setting the fill of that element with css.

Fidely dee

PNG example

CSS

#yourimage:hover {
    background-color: blue;
}

The setback of using the png solution:
This will fill any background color. So to avoid having blue background around an image usually you have a white or any other solid background on the image. See fiddle for example.

Canvas

Its fully possible setting the the strokeStyle in canvas. Yay super easy right? Well canvas does not have objects or elements it only renders what is given to it. So in the code that draws you shape you have to define what color it takes before rendering. Maybe one day there will be elements in canvas?

background-color ignores transparent content?

1 Answers1

PNG example

Canvas

Svg

Recommended