我的 PNG 图标羽毛图像边缘在背景图像上渲染得不好[关闭]

Question

此问题已解决 — 由于 newb 状态，无法发布我自己的问题的答案。 有多个文件并且使用了错误的文件路径。用户错误:-)

我使用 MailChimp 的电子邮件模板，并且我将标题栏中的客户端徽标替换为齿轮图标。这是我的徽标的简化形式，圆形底部边缘带有斜角，后面是原始齿轮图标。 I'm not allowed to post images yet http://dl.dropbox.com/u/1585739/bze_html_nl/images/header-bg%20with%20gear%20and%2072px%20circle.jpg

然而，当我将它加载到 the browser 时，我得到了这个：Yuk http://dl.dropbox.com/u/1585739/bze_html_nl/images/Yuk.png

就我在 PS 中看到的而言，圆圈和齿轮的 RGBA 值非常相似。

我不认为这是任何一种 CSS 阴影效果，但为什么会撕裂？ （我之前没有做过太多的网络工作，但是 30 年的设计和 DTP 工作。到目前为止，我对网络的细微差别非常了解）。

请记住，这是针对 HTML 电子邮件的，因此适用这些“标准”:-)

HTML/CSS Source

这是原始“齿轮”图像的link。它是带有 alpha 的 .png，而不是 .gif 顺便说一句。 Gear http://dl.dropbox.com/u/1585739/bze_html_nl/images/19gear.png 我的PNG file 用 alpha 用 PS 制作：PNG file http://dl.dropbox.com/u/1585739/bze_html_nl/images/bze-72px.png

Answer 1

您稍后提供的图片与您在网站中显示的那个圆圈边缘有白色东西的地方不同..

在深色背景中显示两个图像。 jsfiddle - jsbin (jsfiddle is being slow..)

左圆圈 = The one in this url - 有多余的白色东西。

右圆圈 = The one you gave later on as the "PNG file" - 没有多余的白色。

---

结论是你使用了错误的图片..

Answer 2

在我看来，您好像在浅色背景下进行了此操作，并且您看到的光晕部分是不透明的。我会将其加载到 GIMP 中并使用 Color to Alpha 来确保这些部分不会影响图像。

另外，您说的是 png，但如果您使用的是仅支持一种透明颜色的 gif（我怀疑），那么您所看到的看起来与您拥有具有纯色背景的硬精灵时遇到的问题完全相同颜色（这是调色板中的透明条目），然后调整图像大小。大多数图形应用程序都会平滑缩放的图像，这意味着边缘周围的像素不再使用透明调色板条目。