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

Question

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

JSfiddle

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

<div></div>

这就是我在 150% 缩放时的样子：

更新：Chris 建议我需要在图标之间放置一些 space。所以我的问题是：为什么？以及为什么即使没有 space?

它也能在 Mozilla Firefox 上正常运行

Answer 1

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

像这样使用 url 并将 facebook 图标单独设置为 29x29 怎么样 facebook icon example？

您还可以裁剪现有的 Facebook 图标，并使用图像编辑器将其设置为 29x29。我用 Adobe Photoshop 为你做了

希望对您有所帮助

Answer 2

When I try to display the first icon, it works fine, but when I set zoom to 150%, I see also small part of the second icon.

由于您为容器定义了大小，使用 background-size: cover; 应该可以为您解决缩放问题。遗嘱图像 "cover" 容器的整个宽度或高度。

Answer 3

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

也许试试这个：

background-size: 101%;

它很奇怪，但可以在 IE 11 中使用。

Answer 4

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

因此，当您的 zoom 是 150% 并且您有 29x29px 图像时，您的浏览器需要渲染 43.5x43.5px 图像。每个浏览器的每个版本会如何舍入呢？我们不知道，也许 43x43px，也许 44x44px。 article 关于 sprite 和缩放。

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

JSFiddle

.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;
}

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

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

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

JSFiddle

.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;
}

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

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

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

现在您可以在 gulp/grunt 上使用一些有用的东西来自动生成精灵，您可以在图像之间设置 gap/margin。参见 this。

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

CSS sprite - showing part of another image when zooming

html

css

css-sprites

background-image

zooming