在png文件的颜色面具

Question

我想为用户提供一种简单的方法来更改为png文件的颜色（例如显示调色板并显示结果的实时预览）。

我的平面设计师向我发送了相同的UI元素，只更改了颜色，所以我应该向他询问哪个文件？有点像白色的东西吗？

例如（图像不是100％相似，但你明白了：一条浅色线后面跟着一个从浅到深的渐变，最后是一条暗线）：

我更喜欢通用的png，我可以通过编程方式应用蒙版或其他东西

Answer 1

据我所知，您需要一种通用的方式来创建网站。在这种情况下，我建议您查看您的设计师是否能够在HSL范围内与您合作。如果没有，你可以自己点。这意味着，他提供了颜色和亮度。

查看此设计人员，在DotNet中找到一种简单的方法，通过使用HSL方法来更改任何图像：

http://colorschemedesigner.com

Answer 2

也许你可以试试SVG而不是PNG。它是一种xml格式，您可以在其中轻松更改颜色。

Answer 3

您希望.png包含带有详细信息的Alpha通道。

“任何”彩色渐变的示例图像：

它出现在Photoshop中：

以下是如何将图像与HTML / CSS一起使用的示例：

http://jsfiddle.net/wbk8d/

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

div {
    background: url(http://i.stack.imgur.com/LliRn.png);
    width: 320px;
    height: 60px;
    margin: 0 0 10px 0
}
.red {
    background-color: red
}
.magenta {
    background-color: #f0f
}
.blue {
    background-color: blue
}