覆盖图像而不影响透明度

Question

我想使用css为图像着色，但不会影响其透明部分。

例如：如果我在具有透明背景的图像中有小棕色方块，我想将方块转换为另一种颜色。

我找到了这个指南（http://css-tricks.com/forums/discussion/10828/color-overlay-img/p1），但它也会影响透明部分。

提前致谢

Answer 1

您可以做的是在图像下方放置您想要着色的尺寸。{1}}这就是我要做的事情：

<div>

然后是CSS：

<div class="image">

    <div class="colour"></div>
    <img src="[..].png" alt="Some image" />

</div>

Answer 2

如果区域是矩形

• 在图像顶部使用bg颜色叠加另一个元素。

如果区域是非矩形

• 通过CSS在适当的时间用另一个图像交换图像。
• 在图像上叠加另一张图像（需要时带有透明像素）。
• 在图像顶部叠加画布或SVG图像。
• 使用画布或SVG作为图像，并在需要时编辑图像。

我不相信有一个通用的方法来单独使用CSS（不涉及HTML，或使用多个图像文件，或使用canvas或SVG，或使用JS或jQuery）。如果无法触及HTML源代码，您可以使用JS或jQuery动态修改HTML。