覆蓋圖像而不影響透明

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。