png 文件上的颜色蒙版答案

【问题标题】：Color mask on a png filepng 文件上的颜色蒙版
【发布时间】：2011-05-24 07:07:09
【问题描述】：

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

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

例如（图像不是 100% 相似，但你明白了：一条亮线，然后是从亮到暗的渐变，最后是暗线）：

我更喜欢通用 png，我可以在其上应用蒙版或以编程方式

【问题讨论】：

标签： javascript css png alpha

【解决方案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(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
}

【讨论】：

【解决方案2】：

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

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

http://colorschemedesigner.com

【讨论】：

好吧，我的目标远不止于此。我只需要一种通用方法来更改包含阴影的特定图像的颜色。您提供的网站正是我想要的。我会试着找出方法
我知道并且正在工作的唯一方法是：创建一个 System.Drawing.Bitmap，使用 System.Drawing.Graphics 和 Matrix 并将其再次存储为 System.Drawing.Bitmap。然后，您可以将其用作 WriteableBitmap 并将其作为 ImageSource 共享给 WPF。
另一种方法，如果您只需要亮度，只需在图像上覆盖一个“黑色”或“白色”矩形，不透明度为 0% 到 100%。但是，您无法更改色调。

【解决方案3】：

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

【讨论】：