我有一个图标，我想以任意十六进制数字显示。图标示例如下，但由于颜色可以是任何颜色，我将如何通过提供 HTML 颜色对其进行着色？背景必须是透明的，因为它将成为地图上的一个精确点。关于如何实现这一点的任何想法？
【问题讨论】：
标签： c# image image-processing css
Here 是我会使用的方法。
您需要从该图像的一个没有颜色的版本开始 - 只有轮廓、总线和渐变所需的黑色和白色。您需要渐变具有 alpha 透明度，以便某些像素比其他像素更透明 - 然后您可以将任何颜色放在图像后面，颜色会改变。成功！
问题是这会溢出图钉的边界，您将无法让它覆盖地图，因此您需要找到一种方法来剪辑背景项目，使其与图钉的形状完全相同pin 并且在其边缘之外是透明的。
您可以尝试创建一个形状相同的简单 SVG 图像并将其放在其后面。我使用this tool 创建了这个橙色圆圈：
<?xml version="1.0" standalone="no"?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="200" cy="190" rx="30" ry="30" style="fill:orange"/>
</svg>
通过一些工作，您可能能够获得与您的图钉相匹配的形状，然后当您将其放在透明图像后面时，您需要做的就是使用 Javascript 或其他什么来更改“填充：橙色”中的文本任何你想要的颜色。
另一种类似的方法是使用画布元素来绘制该形状。您还可以尝试使用 CSS 边框圆角和旋转来制作该形状，具体取决于您的浏览器支持的内容。这是一个 css 生成的图钉，它与您需要的形状很接近，尽管还没有：（显然，代码是特定于 webkit 的）
<div style="background-color: blue; -webkit-transform: rotate(-45deg); width:100px; height:100px; border-radius: 50px 60px 50px 0;"></div>
如果您想做一些可以在旧浏览器中使用的操作，您可以创建一堆 1 像素高、长度不等的 div，以创建与透明图钉大小完全一致的东西。
<div class="constructedPin">
<div style="width: 8px"></div>
<div style="width: 12px"></div>
<div style="width: 30px"></div>
<div style="width: 35px"></div>
<div style="width: 38px"></div>
<div style="width: 40px"></div>
<div style="width: 41px"></div>
(etc...)
</div>
<style>
div.constructedPin div { height: 1px; background-color:whatever; margin: auto;}
</style>
那么改变 div 的背景颜色就很简单了。这种方法听起来很复杂，但不会太难，而且实际上加载速度非常快，因为您可以对 div 进行硬编码，不会动态生成，而且 CSS 更新会非常快。
[编辑：] 我被带走了，做了一个小演示。显然，如果你有一张真实的图片，效果会更好——我只是快速地擦除了它的颜色以传达这个想法。
【讨论】：
我认为这不能在客户端使用 CSS 来完成 - 我会使用一个服务器端函数来创建具有指定颜色的位图（可能缓存结果），然后从 HTML 中调用它：
<img src="createicon.ashx?name=truck&color=0xff0000">
原始位图应该使用预定义的背景颜色 - 比如说红色，并且在非背景区域中没有任何红色部分，那么您的代码应该查找所有红色像素并将它们替换为百分比新的背景颜色对应于原始像素中红色的百分比 - 例如如果原始像素为 50% 红色，而您的新颜色为青色，则该像素应变为 50% 青色。
请参阅here 了解有关如何更改位图颜色的一些信息。
【讨论】：
Bitmap 对象-我在答案中添加了链接和更多详细信息。