html - Firefox 中使用背景大小时图像模糊？

我使用背景图像创建了一个 Twitter 背景按钮:

html:

<span class="twitterSocial"><a href="#"></a></span>

为了应对视网膜显示屏，我将原始背景图像稍微放大了一些(64px x 64px)，并使用 css background-size 减小了尺寸。在 Chrome 中图像显示很清晰，但在 Firefox 中图像看起来很模糊，即使我将图像放大了一点......

CSS:

.twitterSocial a {
    background: url("http://oncorz.com/ci/css/newTheme/images/twitter_icon.png") no-repeat scroll center center / contain rgba(0, 0, 0, 0);
    display: block;
    float: left;
    height: 39px;
    opacity: 1;
    transition: all 0.4s ease 0s;
    width: 39px;
}

http://codepen.io/vincentccw/pen/krqLC

最佳答案

发生这种情况是因为浏览器缩小图像以适应 CSS 中定义的尺寸的方式。如果改成32px或者40px，看起来会稍微好一些。我猜 39 是一个不好的数字，因为它不能很好地从 64 推导出来。

使用 CSS 更改图像大小可能会导致此问题，并且最好始终按真实大小显示图像。为您支持的每个显示器创建一组图像(或此类组的 Sprite )，或使用矢量图像，例如字体。

我的建议是使用字体而不是图像。它不仅加载速度更快，从服务器发出的请求更少，而且几乎在任何尺寸上看起来都很棒，因为它们是矢量图形。

我使用 FontAwesome，它有超过 400 个图标作为字体(包括 Twitter)。他们真的很棒:)

http://fortawesome.github.io/Font-Awesome/

关于html - Firefox 中使用背景大小时图像模糊？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24554727/