background-color ignores transparent content? - html

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>

Answer 1

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?
SvgRecommended
Svg elements can have an id! So we can simply make an svg:
html
<svg width="100" height="100">
<circle id="favcirc" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>
<svg/>
And access the fill value of the element!
css
#favcirc {
fill = "#F00"
}
ps if you lucky and only have one color you can hue-rotate it with filter:
Filter demo