Background-color ignores transparent content?
I have an image filling content and transparent content. I want to get the background color, but only for filled content (ignores transparency) Is this possible? Can I do something like this?
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>
source to share
To answer your question No , but you can set the background color and the image so that the background appears on the transparent part of your image:
tl; dr There are several ways to change parts of an image / object. I think the easiest way is to create an svg inline image / object. and by setting padding of that css element.
Example PNG
CSS
#yourimage:hover {
background-color: blue;
}
Ditching the png solution:
This will fill in any background color. To avoid having a background blue
around the image, you usually have a white or any other solid background in your image. For example, see the violin.
Canvas
It is possible that it will set the stroke style to the canvas. Yay is super easy right? There are no objects or elements in the canvas that only represent what is given to it. Thus, in the code that draws the form, you must define what color is required before rendering. Maybe someday there will be elements in the canvas?
SVG
Recommended
Svg elements can have an ID! So we can just create the 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're lucky and you only have one color you can rotate it with a filter: Filter demo
source to share