CSS-将颜色叠加层应用于具有透明背景的PNG

Question

有人可以建议如何执行此操作：

我在网站上为客户使用了PNG图片。 图像具有透明背景，并且图像内容本质上是轮廓图。 对于此示例，可以说它是一个棒图。 除了stickmans轮廓外，其他所有东西都是透明的。

我想要做的就是添加此图像，无论是作为背景图像还是作为图像元素。 并应用CSS叠加层，该叠加层将仅对图像中的实际内容或“线条”进行着色。 换句话说，Stickman可以通过不覆盖背景的CSS覆盖将其颜色从白色更改为蓝色，红色，绿色等。

我知道我可以在photoshop中执行此操作，但是我正在尝试为此创建一个更动态的解决方案。 它是为了动态改变图像

Answer 1

到期：

filter: hue-rotate(0deg);

您可以将0更改为0到360之间的任何值。

这会改变色相，使其绕色轮旋转。

Answer 2

如果徽标的背景始终是相同的颜色，则可以剪裁徽标，使徽标在彩色背景内保持透明。

然后，可以通过更改图像的背景颜色，使用CSS更改徽标颜色。

仅在徽标背景始终为相同颜色时才有效。

Answer 3

我看到您想为照片的特定部分着色，对吗？ （我已经搜索了很多有关您的问题的信息）

无论如何，HTML都有一个用于选择特定部分的标签，但不幸的是，它与标签一起使用，可以使图像的一部分可点击； 粗略地说，做到这一点只能用HTML和CSS来完成（我认为）。 您还可以将JS与HTML代码一起使用（将覆盖所需区域并为其着色）。

 function gg() { var c = document.getElementById("locations"); var ctx = c.getContext("2d"); var img = new Image(); img.src = 'test.bmp'; // any pic u want img.onload = function() { // after the pic is loaded ctx.drawImage(this,0,0); // add the picture ctx.beginPath(); // start the rectangle ctx.moveTo(39,40); ctx.lineTo(89,43); ctx.lineTo(82,72); ctx.lineTo(40,74); ctx.lineTo(39,40); ctx.fillStyle = "rgba(32, 45, 21, 0.3)"; // set color ctx.fill(); // apply color }; } 

 <canvas id="locations" width="400" height="300" style="border:1px solid #d3d3d3;"> Your browser can't read canvas</canvas> <input type="button" onclick="gg()" value="h">