我的PNG图标羽毛图像边缘不能很好地渲染背景图像

时间:2011-12-15 08:23:14

标签: html transparency html-email

已经解决了这个问题 - 由于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 btw。 Gear http://dl.dropbox.com/u/1585739/bze_html_nl/images/19gear.png 我的PNG file在PS中制作了alpha:PNG file http://dl.dropbox.com/u/1585739/bze_html_nl/images/bze-72px.png

2 个答案:

答案 0 :(得分:2)

您之后提供的图片与您在该圈子边缘有白色内容的网站不同。

在黑暗背景下显示两张图像。 jsfiddle - jsbin (jsfiddle is being slow..)

左圆= The one in this url - 有额外的白色东西。

右圆= The one you gave later on as the "PNG file" - 没有额外的白色东西。


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

答案 1 :(得分:1)

在我看来,就像你在浅色背景上看到的一样,并且你看到的光环部分是不透明的。我将它加载到GIMP中并使用Color to Alpha来确保这些部分不会影响图像。

另外,你说png,但如果你使用的gif(我怀疑)只支持一种透明色,你所看到的看起来就像你有一个坚实的背景的硬精灵时会遇到的问题color(调色板中的透明条目)然后调整图像大小。大多数图形应用程序使缩放图像平滑,这意味着边缘周围的像素不再使用透明调色板条目。