Question

有人可以建议如何做到这一点：

我在网站上为客户端使用了PNG图像。图像具有透明背景，图像内容基本上是轮廓图。对于这个例子，我们可以说它是一个棒人画。除了stickmans概述外，一切都是透明的。

我希望能够添加此图像，无论是作为背景图像还是作为图像元素。并应用一个CSS叠加层，它只会为实际内容或图像中的“线条”着色。换句话说，Stickman可以通过不会为背景着色的css叠加将其颜色从白色变为蓝色，红色，绿色等。

我知道我可以在Photoshop中做到这一点，但我正在尝试为此创建一个更动态的解决方案。它允许动态改变图像

Answer 1

与此相关：

filter: hue-rotate(0deg);

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

这会将色调更改为围绕色轮的旋转。

Answer 2

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

然后可以通过改变图像的背景颜色来改变徽标颜色。

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

Answer 3

我知道你想要为照片的特定部分着色，对吗？（我搜索了很多关于你的问题）

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: