在不影响透明的情况下叠加图像

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

如果区域是矩形

• 覆盖与图像的顶部的背景色另一种元素。

如果区域是非矩形

• 换出的图像与另一个在通过CSS的适当的时间。
• 叠加另一图像（在需要的地方透明像素）在图像上。
• 在图像顶部覆盖一个画布或SVG图像。
• 使用帆布或SVG的图像，并在需要时编辑图像。

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