html - 背景颜色忽略透明内容？

Question

我有填充内容和透明内容的图像。我想获得背景色，但仅针对填充内容(忽略透明)可能吗？我可以做类似的事情吗？

我的元素: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

要回答您的问题否，但您可以设置背景颜色和图像，以便背景显示在图像的透明部分:

tl;dr 有多种方法可以更改图像/对象的各个部分。我认为最简单的方法是使用 svg 嵌入图像/对象。并使用 css 设置该元素的填充。

Fidely dee

PNG 示例

CSS

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

使用png方案的挫折:
这将填充任何背景颜色。因此，为了避免图像周围出现 blue 背景，通常您会在图像上设置白色或任何其他纯色背景。例如，请参见 fiddle 。

Canvas

完全可以在 Canvas 中设置 strokeStyle。是的， super 简单吧？好吧， Canvas 没有对象或元素，它只渲染给它的东西。因此，在绘制形状的代码中，您必须在渲染之前定义它所采用的颜色。也许有一天 Canvas 中会有元素？

Svg

推荐

Svg 元素可以有一个 id!所以我们可以简单地制作一个 svg:

html

<svg width="100" height="100">
    <circle id="favcirc" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>
<svg/>

并访问元素的填充值!

CSS

#favcirc {
    fill = "#F00"
}

ps 如果你幸运并且只有一种颜色，你可以使用滤镜对它进行色相旋转: Filter demo