有没有办法使图像中的特定颜色（白色）对网页透明？答案

【问题标题】：Is there a way to make a specific color (white) in an image transparent for a webpage?有没有办法使图像中的特定颜色（白色）对网页透明？
【发布时间】：2013-04-04 19:05:58
【问题描述】：

我希望能够获取具有此代码的厌恶签名的王国：

<a href="http://www.kingdomofloathing.com"><img src="http://sigs.kingdomofloathing.com/player_2192849/mode_bigsig/l1_clan/l2_clantitle/s1_level/s2_class/playerfeed_2192849_bigsig.gif" border="0" /></a>

我想将图像的白色背景设为透明。我不能在图像编辑器中执行此操作的原因是因为这些签名会根据您在游戏中所做的事情每隔一段时间更新一次。

【问题讨论】：

这可能有一个 CSS3 过滤器，但即便如此，也很少有浏览器会理解它。
目前仅使用 HTML 和 CSS 是不可能的。
OP 似乎并没有真正理解他/她要完成的任务。

标签： html css image transparency transparent

【解决方案1】：

简单的答案是你不能用 CSS 和 HTML 来做到这一点。

像 Frank Tudor 所说的那样使用 CSS 为元素添加透明度（通过不透明度）将影响整个图像。

所以你真的有三个选择：

使用 Photoshop 等设计软件编辑图像，删除白色 bg 并将其保存为 trans gif 或 png。
利用 CSS 不透明度，但这会使整个对象透明。如果您对此感到满意，那么这可能是最简单的解决方案。
使用脚本语言。正如其他人所说，您可以技术上使用某些脚本语言（如 PHP）编辑图像。这将是执行此任务的最耗时/最技术性的方式（取决于您的编码技能）。

希望这会有所帮助。

【讨论】：

是否有一个程序可以记录网络浏览器点击的内容，然后当您停止记录器时，它会将序列转换为 javascript 代码。因为如果有的话，我可以编写一个脚本，将图像的 url 输入 www.online-image-editor.com，然后编辑出白色背景。
不确定我理解你的意思。您可以使用网络检查器来跟踪浏览器在做什么。但是我什至不知道您是否可以控制此图像的存储位置，因为我真的不明白您此时要实现的目标。

【解决方案2】：

如果要更新图像，则取决于您用于动态创建这些图像的任何代码。无论图像是如何制作的，您都应该能够在创建图像时使用透明度。

我推荐 PNG 而不是 GIF，但两者都可以。

发布生成签名图像的代码，有人可以帮助您更新它以使用透明背景。

【讨论】：

我不知道生成它们的代码......制作厌恶王国的人制作了签名生成器。
哦，我没有意识到那不是你自己的。不去找原创者，是无法得到想要的效果的。即使您要加载此图像并对其进行编辑，您也会发现仅用透明替换白色也不够好，因为它们使用抗锯齿（灰色像素的阴影）。你会在文本周围留下难看的灰白色。
此外，这些图像中的笔颜色是黑色的，因此如果您将背景设置为透明，则必须非常小心放置图像的位置。在深色背景上，文本可能无法阅读。最好的办法是向厌恶王国的作者提出请求，以提供其他配色方案的签名图像。由于它们似乎都是关于白底黑字的，我怀疑它会发生，但你应该问。

【解决方案3】：

在一种情况下有高级操作函数 javascript 我记得 opacity 用于透明度，在大多数服务器端编程语言中，您可以找到图像函数。

您面临的问题（没有图像编辑器）是透明度是图像保存时的参数（在透明度方面，某些图像类型看起来比其他类型更好）。

你可以试试这个……

尝试在您的 IMG 标记和这段代码中添加一个 ID 或类。

#IDgifThing {
  opacity: 0.5;  /* 50% transparent */
}

我没有测试过它，但我希望它可以帮助你，或者至少让你的思路朝着正确的方向发展。

【讨论】：