Question

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

HTML：

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

为了应对视网膜显示屏幕，我将原始背景图像稍大（64像素×64像素）并使用css背景大小缩小尺寸。镀铬的图像显示很清晰，但在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

Answer 1

这是因为浏览器缩小图像以适应CSS中定义的大小。如果更改为32px或40px，它看起来会稍好一些。我猜39是一个不好的数字，因为它不能从64得到很好。

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

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

我使用FontAwesome，它有超过400个图标作为字体（包括twitter）。他们真的很棒：）

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

使用背景大小的Firefox中的模糊图像？

1 个答案: