CSS Sprites 图像在 IE 中渲染质量较差
我有一个 CSS 图像精灵,它在 FF 和 IE 中呈现完美。 问题是渲染的图像在 IE 中看起来质量很差。
以前有人遇到过这种情况吗? 你怎么修好它的? 我需要 CSS 精灵来节省带宽和请求。
替代文字 http://cupacupelor.ro/img/problem.png
.blackmncenter2
{
float:left;
height:32px;
line-height:32px;
background-image:url(../img/top-menu-center.png);
background-repeat:repeat-x;
background-position:left -64px;
color:White;
cursor:pointer;
display:block;
}
图片:
演示:
黑顶菜单,发布后最多 7 天可用。 用 FF 试试,然后用 IE 试试。
I have a CSS image sprite and this renderes perfect in FF, also IE.
The problem is the rendered image looks to have poor quality in IE.
Has anyone encountered this before? How did you fix it? I need CSS sprites to save bandwidth and requests.
alt text http://cupacupelor.ro/img/problem.png
.blackmncenter2
{
float:left;
height:32px;
line-height:32px;
background-image:url(../img/top-menu-center.png);
background-repeat:repeat-x;
background-position:left -64px;
color:White;
cursor:pointer;
display:block;
}
Image:
Demo:
The black top menu, available max 7 days from posting.
Try it with FF, then with IE.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您需要 PNG 格式的图形吗? 传统上,Internet Explorer 6.0 及更早版本存在一些与 PNG 格式相关的问题,最明显的是缺乏对 Alpha 通道的支持。
如果没有这个 Alpha 通道,IE 就无法正确渲染 PNG 图像中表示的透明度。 这可能会稍微扭曲图像,或者给您带来与您期望看到的不同的东西。
如果没有更多细节,就很难辨别导致问题的原因(或者问题首先是什么)。
Do you need to have the graphic in PNG format? Traditionally, Internet Explorer 6.0 and earlier had some issues relating to the PNG format, most notably the lack of support for the alpha channel.
Without this alpha channel, IE can't render the transparency represented in PNG images correctly. This might distort the image a bit, or give you something other than what you were expecting to see.
Without more details it's hard to discern what's causing the problem (or what the problem is in the first place).
请定义“质量差”。 也许是因为你的 CSS 精灵没有保留原始图像的透明度?
Please define "poor quality". Maybe it's because your CSS sprite didn't preserve the original image's transparency?
奇怪的行为,出乎意料。
即使我有 IE 7 和没有透明度的 PNG,使用 background-position 样式渲染的背景在 IE 中也会很奇怪。
将图片保存为JPG并修改CSS即可解决问题。
比起你们,我对答案进行了投票。
Strange behavior, not expected.
Even if I have IE 7 and PNG with no transparency, backgrounds rendered with background-position style work weird in IE.
Saving the image as JPG and modify the CSS solved the problem.
Than you guys, I voted the answers.