Question

我有following CSS精灵。当我尝试显示第一个图标时，它工作正常，但当我将缩放设置为150％时，我也会看到第二个图标的一小部分。此问题出现在Google Chrome和Internet Explorer上，但不适用于Mozilla Firefox：

JSfiddle

＆＃13;

div {
    width: 29px;
    height: 29px;
    background-image: url(http://i.imgur.com/O2Cp0nb.png);
}

＆＃13;

<div></div>

＆＃13;

这是150％缩放时它的外观：

更新：克里斯建议我需要在图标之间放一些空格。所以我的问题是：为什么？为什么即使没有这个空间，它在Mozilla Firefox上运行良好？

Answer 1

在某些情况下，不同的浏览器可能会使用不同的算法来舍入数字和渲染图像。您可以阅读一些有关它的文章，例如 - this和this。

因此，当您的zoom为150%并且您拥有29x29 px图片时，您的浏览器需要呈现43.5x43.5 px图片。每个浏览器的每个版本如何围绕它？我们不知道，也许43x43 px，也许44x44 px。有关于精灵和缩放的article。

我使用两对图片创建新的代码段。第一对使用你的图像精灵，第二对 - 我的。我将Facebook图像大小从29x29 px增加到30x30 px。尝试缩放它。您可以看到他们在不同zoom比率上遇到问题（第一个 - 150%，第二个 - 110% - 125%。

JSFiddle

＆＃13;

.fb29 {
    width: 29px;
    height: 29px;
    background: url(http://i.imgur.com/O2Cp0nb.png) no-repeat;
    background-size: 29px;
}

.sun29 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/O2Cp0nb.png) 0 -29px no-repeat;
    background-size: 29px;
}

.fb30 {
    margin-top: 10px;
    width: 30px;
    height: 30px;
    background: url(http://i.imgur.com/mRIPLXO.png) no-repeat;
    background-size: 30px;
}

.sun30 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/mRIPLXO.png) 0 -30px no-repeat;
    background-size: 30px;
}

＆＃13;

<div class="fb29"></div>
<div class="sun29"></div>

<div class="fb30"></div>
<div class="sun30"></div>

＆＃13;

所以，我的建议是在图像之间添加1px以独立于不同的浏览器舍入算法和浏览器错误：

JSFiddle

＆＃13;

.fb29 {
    width: 29px;
    height: 29px;
    background: url(http://i.imgur.com/dKxYwhZ.png) no-repeat;
    background-size: 29px;
}

.sun29 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/dKxYwhZ.png) 0 -30px no-repeat;
    background-size: 29px;
}

.fb30 {
    margin-top: 10px;
    width: 30px;
    height: 30px;
    background: url(http://i.imgur.com/1fJyJVK.png) no-repeat;
    background-size: 30px;
}

.sun30 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/1fJyJVK.png) 0 -31px no-repeat;
    background-size: 30px;
}

＆＃13;

<div class="fb29"></div>
<div class="sun29"></div>

<div class="fb30"></div>
<div class="sun30"></div>

＆＃13;

如果您需要支持旧的IE浏览器，请查看this article。

现在，您可以在gulp / grunt上使用一些有用的东西来自动生成精灵，您可以在其中设置图像之间的间隙/边距。请参阅this。

Answer 2

问题似乎是图像插值或图像尺寸舍入误差。

也许试试这个：

background-size: 101%;

这很糟糕但可以在IE 11中使用。

Answer 3

当我尝试显示第一个图标时，它工作正常，但当我将缩放设置为150％时，我也会看到第二个图标的一小部分。

由于您已为容器定义了大小，因此使用background-size: cover;应该为您更正缩放问题。将图像"cover"设置为容器的整个宽度或高度。

Answer 4

看起来您正在使用css像素裁剪一段较大的图像。这就是我看到你的图片网址。

如果使用仅将facebook图标设置为29x29的网址facebook icon example，那该怎么办？

您还可以裁剪自己的脸谱图标，并使用图像编辑器将其设置为29x29。我是使用Adobe Photoshop为你做的

希望这有帮助

CSS精灵 - 缩放时显示另一幅图像的一部分

4 个答案: