我的 PNG 图标的羽化图像边缘在背景图像上渲染得不好
这个问题已解决 - 由于新手状态，无法发布我自己的问题的答案。 有多个文件并且使用了错误的文件路径。用户错误:-)
我使用 MailChimp 的电子邮件模板，并用标题栏中的客户徽标替换齿轮图标。这是我的徽标，采用简化的圆形形式，底部边缘有斜角，后面是原始的齿轮图标。 我不是还允许发布图像http://dl.dropbox.com/u/1585739/bze_html_nl/images/header-bg%20with%20gear%20and%2072px%20circle.jpg
然而，当我将其加载到 浏览器 我得到这个： Yuk http://dl.dropbox.com/u/1585739/bze_html_nl/images/Yuk.png
据我在 PS 中看到的，圆圈和齿轮的 RGBA 值非常相似。
我不认为这是什么 CSS 阴影效果，但为什么它会撕裂？ （我之前没有做过太多的网络工作，但有 30 年的设计和 DTP 经验。到目前为止，我对网络的细微差别还很陌生）。
请记住，这是针对 HTML 电子邮件的，因此适用这些“标准”:-)
<--!编辑--> 这是原始“gear”图像的链接。顺便说一句，它是带有 alpha 的 .png，而不是 .gif。 齿轮http://dl.dropbox.com/u/1585739/bze_html_nl /images/19gear.png 我的 PNG 文件 在 PS 中使用 Alpha 制作：< a href="http://dl.dropbox.com/u/1585739/bze_html_nl/images/bze-72px.png" rel="nofollow noreferrer">PNG 文件 http://dl.dropbox.com/u/1585739/bze_html_nl/images/bze-72px.png
THIS QUESTION IS SOLVED — can't post an answer to my own question on account of newb status.
Had more than one file and was using the wrong file path. User error :-)
I using an email template from MailChimp and I'm substituting a client logo in the title bar for the the gear icon. Here's my logo in the simplified form of a circle with bezelled bottom edge followed by the original gear icon.
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
Yet when I load it into the browser I get this: Yuk http://dl.dropbox.com/u/1585739/bze_html_nl/images/Yuk.png
The circle and the gear have very similar RGBA values so far as I can see in PS.
I don't think this is any kind of CSS shadow-effect but why is it tearing? (I haven't done much web work before but 30 years of Design and DTP. I'm pretty green re web nuances so far).
Remember this is for an HTML-email so those 'standards' apply :-)
<--! EDIT-->
Here is a link to the original "gear" image. It is a .png with alpha, not a .gif btw. Gear http://dl.dropbox.com/u/1585739/bze_html_nl/images/19gear.png
My PNG file made in PS with alpha: PNG file http://dl.dropbox.com/u/1585739/bze_html_nl/images/bze-72px.png
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您稍后提供的图像与您在网站中显示的图像不同，其中该圆圈的边缘有白色的东西。
在深色背景中显示这两个图像。 jsfiddle - jsbin（jsfiddle 很慢..）
左圆 = 这个网址中的那个 - 有多余的白色东西。
Right Circle = 您稍后提供的“PNG 文件” - 没有多余的白色物质。
结论是您使用了错误的图像。
The image you provided later is different than in the site that you have shown where there is white stuff at the edges of that circle..
Shows both images in a dark background. jsfiddle - jsbin (jsfiddle is being slow..)
Left Circle = The one in this url - Has that extra white stuff.
Right Circle = The one you gave later on as the "PNG file" - Doesn't have extra white stuff.
Conclusion would be that you are using the wrong image..
在我看来，好像你在浅色背景上看到了这个，并且你看到的光晕部分是不透明的。我会将其加载到 GIMP 中并使用 Color to Alpha 来确保这些部分不会影响图像。
另外，你说的是 png，但如果你使用的是仅支持一种透明颜色的 gif（我怀疑），那么你所看到的看起来就像你有一个带有纯色背景色的硬精灵时遇到的问题（这是调色板中的透明条目），然后调整图像大小。大多数图形应用程序都会平滑缩放图像，这意味着边缘周围的像素不再使用透明调色板条目。
Looks to me as though you had this over a light background, and that the halo parts you're seeing are opaque. I'd load this into GIMP and use Colour to Alpha to make sure those parts don't affect the image.
Also, you said png, but if you are using a gif (which I suspect) that only supports one transparent colour, what you're seeing looks exactly like issues you get when you have a hard sprite with a solid back ground colour (which is the transparent entry in the palette) and then you resize the image. Most graphics applications smooth the scaled image and this means that the pixels around the fringe are no longer using the transparent palette entry.