在不影響透明的情況下疊加圖像

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。