覆盖图像而不影响透明

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或使用多个图像文件，画布或SVG或JS或jQuery）。 如果无法触摸HTML源代码，则可以使用JS或jQuery动态修改HTML。