当通过外部 CSS 或内联样式缩放时，Firefox 会模糊图像. [英] Firefox blurs an image when scaled through external CSS or inline style.

问题描述

当我在视觉上缩放图像时，Firefox 3 会模糊它.Firefox 2 和其他浏览器没有，这是我期望的行为.这对于使用 png 或 gif 精灵创建基于网络的游戏来说尤其糟糕.

When I visually scale an image, Firefox 3 blurs it. Firefox 2 and other browsers don't, which is the behavior I expect. This is especially lame for creating a web based game using png or gif sprites.

例如，当像这样在 Firefox 3 中显示 100x100 图像时:

For example, when showing a 100x100 image in Firefox 3 like this:

<img src="sprite.gif" width="200" />

或

<img src="sprite.gif" style="width:200px; height:200px;" />

它在 FF3 中看起来很模糊，而在 IE 中则不然.

it looks blurred in FF3, not in IE.

关于如何防止这种情况的任何想法?

Any ideas on how to prevent this?

推荐答案

我发现了 FireFox 的这个新功能:

I discovered this new feature of FireFox:

http://developer.mozilla.org/En/CSS/Image-rendering

所以把它放在你的 CSS 中会修复它:

So putting this in your CSS will fix it:

image-rendering: -moz-crisp-edges;

我想我会分享这个信息.抱歉回答我自己的问题;)

Thought I'd share this info. Sorry for answering my own question ;)

这篇关于当通过外部 CSS 或内联样式缩放时，Firefox 会模糊图像.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！