html - kisscut 图像 png 上的 CSS 图像颜色叠加

Question

您好，我正在尝试对吻切透明 png 图像进行颜色叠加，有点像带有不透明度控制的 photoshop 颜色叠加。

我尝试搜索但找不到这个特定的解决方案。 https://jsfiddle.net/j2e83gxq/9/

.imgoverlay {
  width:500px;
  padding-top:500px;
  background-image:url("https://upload.wikimedia.org/wikipedia/commons/6/66/Android_robot.png");
  background-repeat:no-repeat;
  background-size:contain;
  background-color:cyan;
  background-blend-mode: overlay;
}

<div class="imgoverlay">
</div>

我所能找到的只是使用背景颜色，但这会为整个元素着色，我只需要它来覆盖图像而不是透明的一面。

所以基本上我正在尝试对这张图片进行颜色叠加: https://upload.wikimedia.org/wikipedia/commons/6/66/Android_robot.png

有不同的颜色。

Answer 1

您无法在 CSS 中实现此效果，最好的方法是使用 Photoshop。