png 文件上的颜色蒙版

Question

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

我的图形设计师向我发送了相同的 UI 元素，只是颜色发生了变化，那么我应该向他索取什么文件？像纯白色阴影的 png 之类的东西？

例如（图像并非 100% 相似，但您可以理解：一条浅线，然后是从浅到深的渐变，最后是一条暗线）：

我更喜欢一个通用的 png，我可以在上面以编程方式应用蒙版或其他东西

Answer 1

您需要一个包含带有细节的 Alpha 通道的 .png。

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

正如 Photoshop 中显示的那样：

以下是如何通过 HTML/CSS 使用图像的示例：

http://jsfiddle.net/wbk8d/

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

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

Answer 2

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

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

http://colorschemedesigner.com

Answer 3

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