如何使用CSS显示具有不同前景的相同图像

Question

我想让我的用户选择他们的头像颜色。它总是相同的图像，但颜色不同。

当然，我可以单独创建每种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>

我也尝试过降低不透明度，但却导致颜色质量不佳。

Answer 1

您可以叠加3个div和2个图像来实现此目的。保持一个简单的div，并选择你的颜色。将灰色图像置于顶部，高透明度，以便在头像上显示颜色。将另一个透明的gif放在这两个div的顶部。 gif必须在你的头像上是透明的，并在你的化身的负面填充白色。这样你就可以在中心看到白色方形和彩色化身。

可能不是最好的方法，但它应该有用。