html - 叠加图像而不影响透明

Question

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

例如：如果我在透明背景的图像中有一个小的棕色正方形，我只想将正方形变成另一种颜色。

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

提前致谢

Answer 1

您可以做的是<div>在您想要着色的尺寸处放置图像下方。这就是我要做的：

<div class="image">

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

</div>

然后是 CSS：

.image{
    width: 100px; /* The image width */
    height: 100px; /* The image height */

    position: relative;
}

.image .colour{
    width: 30px; /* Width of the part you want to colour */
    height: 30px; /* Height of the part you want to colour */

    position: absolute;
    top: 35px; /* Y coordinate */
    left: 35px; /* X coordinate */
}

.image img{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Place above the coloured part */
}

Answer 2

如果区域是矩形

• 在图像顶部用 bg 颜色覆盖另一个元素。

如果区域不是矩形

• 在适当的时候通过 CSS 将图像换成另一张图像。
• 在图像上覆盖另一个图像（在需要时使用透明像素）。
• 在图像顶部覆盖画布或 SVG 图像。
• 为图像使用画布或 SVG，并在需要时编辑图像。

我不相信有一种通用的方法可以单独使用 CSS（不接触 HTML，或使用超过 1 个图像文件，或使用画布或 SVG，或使用 JS 或 jQuery）。如果无法触摸 HTML 源代码，您可以使用 JS 或 jQuery 动态修改 HTML。