2

我使用背景图片创建了一个 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

4

1 回答 1

4

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

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

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

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

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

于 2014-07-03T13:27:30.677 回答