PNG示例

Question

我有填充内容和透明内容的图像。我想获得背景颜色，但仅限于填充内容（忽略透明）是否可能？我可以这样做吗？

＆＃13;

$("#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);
});

＆＃13;

@-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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

Fidely dee

PNG示例

<强> CSS

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

使用png解决方案的挫折：
这将填充任何背景颜色。因此，为避免在图像周围出现blue背景，通常图像上会出现白色或任何其他背景。例如，请参阅小提琴。

帆布

完全可以在画布中设置strokeStyle。你好超级好吗？好的画布没有对象或元素，它只渲染给它的东西。因此，在绘制形状的代码中，您必须定义渲染之前所需的颜色。也许有一天画布上会有元素？

background-color忽略透明内容？

1 个答案:

PNG示例

帆布

Svg为

推荐