如何使用CSS顯示不同前景的相同圖像

我想讓我的用戶選擇他們頭像的顏色。這將永遠是相同的圖像，但以不同的顏色。如何使用CSS顯示不同前景的相同圖像

enter image description here

當然，我可以單獨創建每個RGB顏色的PNG圖像或我只能創建一個（比方說灰色）和使用CSS來提供所需的前景。

現在，我該怎麼做？我曾嘗試（fiddle）：

<style> 
    .test { width: 128px; height: 128px; } 
    .red { background: red url(my_image.png) 50% 0 no-repeat; } 
    .blue { background: blue url(my_image.png) 50% 0 no-repeat; } 
</style> 

<div class="test red"></div> 
<div class="test blue"></div>

我也嘗試降低不透明度，但它導致了顏色質量較差。

來源

2014-10-31 dev9

使用SVG .....而不是PNG？ – 2014-10-31 17:11:06

[可以試試這個。]（http://css-tricks.com/tinted-images-multiple-backgrounds/）你要求的是「着色」。 – Compass 2014-10-31 17:12:06

@Compass謝謝，但IE8,9不支持它 – dev9 2014-10-31 17:20:42

您可以堆疊3個div和2個圖像來實現此目的。保持一個普通的div，並填寫您的顏色選擇。將灰色圖像置於高透明度的頂部，以便顏色顯示在頭像上。在這兩個div的頂部放置另一個透明gif。 gif必須在你的頭像上是透明的，並在你的頭像的負面上填充白色。這樣你可以在中心看到白色的彩色方塊和彩色化身。

可能不是最好的辦法，但它應該工作。

來源

2014-10-31 17:26:00

如何使用CSS顯示不同前景的相同圖像

回答

相關問題