CSS - 将颜色覆盖应用于具有透明背景的 PNG答案

【问题标题】：CSS - Apply a colour overlay to a PNG with transparent backgroundCSS - 将颜色覆盖应用于具有透明背景的 PNG
【发布时间】：2017-04-15 04:02:41
【问题描述】：

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

我在网站上为客户使用了一张 PNG 图像。图像具有透明背景，图像的内容本质上是轮廓图。对于这个例子，可以说它是一个火柴人绘图。除了火柴人的轮廓外，一切都是透明的。

我想要做的是添加这个图像，无论是作为背景图像还是仅仅作为图像元素。并应用一个 CSS 叠加层，它只会为图像中的实际内容或“线条”着色。换句话说，Stickman 可以通过不会为背景着色的 CSS 覆盖将他的颜色从白色变为蓝色、红色、绿色等。

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

【问题讨论】：

你可以使用mix-blend-mode，虽然它没有最好的浏览器支持。使用相关图像发布代码 sn-p。 ....我实际上建议您创建一个 SVG。有了它，您可以轻松更改线条颜色，以及或多或少的完整浏览器支持（来自 IE9）
感谢您的回复，我目前无法发布图片，因为这是我的客户徽标，他们还没有注册商标或其他任何东西，所以我被要求暂时保密！但是，如果有帮助，我将创建一个模型并稍后发回
我同意@LGSon，如果可以，请使用 SVG。否则，您可以在画布上绘制图像并操纵该画布来做任何您想做的事情。
同样在你可以用 SVG 做的花哨的事情还没有很好的浏览器支持时，mask-image 完全符合你的要求：developer.mozilla.org/en-US/docs/Web/CSS/mask-image

标签： html css overlay transparent

【解决方案1】：

过期：

filter: hue-rotate(0deg);

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

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

【讨论】：

谢谢你的建议，我确实遇到了hue-rotate滤镜，它几乎是合适的。问题是我需要设置非常具体的颜色，所以我不确定这是否可行
这可能会有所帮助：http://stackoverflow.com/a/3732073
如果你在谷歌上搜索“rgb to hex”，你会得到一个 2 路转换器来将你拥有的十六进制转换为 rgb 以将 rgb 转换为色相

【解决方案2】：

如果徽标的背景始终是相同的颜色，您可以剪掉徽标，让徽标在彩色背景中保持透明。

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

这仅适用于徽标背景始终为相同颜色的情况。

【讨论】：

【解决方案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">

【讨论】：