如何使用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显示不同前景的相同图像

回答

相关问题