使用背景大小在Firefox中模糊图像？答案

【问题标题】：Blurry image in firefox using background size?使用背景大小在Firefox中模糊图像？
【发布时间】：2023-04-07 19:48:01
【问题描述】：

我使用背景图片创建了一个 twitter 背景按钮：

html:

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

为了配合retina显示屏，我把原来的背景图片稍微放大了一点（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

【问题讨论】：

标签： html css background-size

【解决方案1】：

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

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

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

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

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

【讨论】：