html - 如何使用 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 并用您选择的颜色填充它。将您的灰色图像以高透明度放在顶部，以便颜色显示在您的头像上。在这两个 div 之上放置另一个透明 gif。 gif 必须在您的头像上是透明的，并且在您头像的反面填充白色。这样您就可以在中心看到白色正方形和彩色头像。

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