如何将 CSS 精灵用于重复背景图像？

Question

这是我过去遇到的麻烦，我一直在想，所以我制作了一个简单的示例精灵图像进行测试，希望能得到一些答案。

如果您在此处查看我的代码和演示 http://dabblet.com/gist/2263037

你会看到我有一个使用背景图片的简单 div

在该 DIV 下方我有相同的 div，但这次我尝试使用 CSS Sprite 图像代替

所以我的问题是，是否可以使用此精灵图像复制第一个 DIV 的外观，或者是否需要对精灵图像进行更改？

没有 Sprite 图片

/* Notice wrapper with Single Image */
.notice-wrap {
    margin-top: 10px; padding: 0 .7em;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #CD0A0A;
    background: #B81900 url(http://www.getklok.com/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;
}

有雪碧图片

/* Notice wrapper with SPRITE Image */
.notice-wrap-sprite {
    margin-top: 10px; padding: 0 .7em;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #CD0A0A;
    background: #fff url(http://f.cl.ly/items/2P1u2S1a132R0B3d2s08/test-sprite.png) repeat;
    background-position: 0 -52px;
}

HTML

<div class="notice-wrap"> 
       <p><strong>NOTICE:</strong> This is just a test notice, no reason to be alarmed</p> 
</div>

<BR><BR><BR>

<div class="notice-wrap-sprite"> 
       <p><strong>NOTICE:</strong> This is just a test notice, no reason to be alarmed</p> 
</div>

Answer 1

设置精灵

您可以使用图像精灵来做您想做的事。它们只能沿一个轴重复，即repeat-x，但在您的情况下，这就是您所需要的。此外，精灵中的图像必须运行整个宽度，这就是浏览器知道平铺它的方式。

诀窍是您重复的背景必须延伸到您的精灵图像的全宽。这是至关重要的。这是您的图片，经过修改以满足该标准：

设置 CSS

现在我们照常引用它，它会正常工作：

/* Notice wrapper with SPRITE Image */
.notice-wrap-sprite {
    margin-top: 10px; padding: 0 .7em;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #CD0A0A;
    background: #fff url(http://f.cl.ly/items/2P1u2S1a132R0B3d2s08/test-sprite3.png) repeat-x;
    background-position: 0 -52px;
}

Answer 2

我认为在这种情况下你必须把精灵放在它自己的行上。这应该可以工作，因为您的图像垂直限制在设定的高度。至少在示例中是这样的。

此外，图像需要与精灵的宽度相同。背景图像需要扩展精灵宽度的原因是因为您在 x 轴上重复，如果您的精灵左侧有空白区域或其他图像，您将得到与您的示例类似的东西。

在您的示例中，您的精灵中的图像可能不太适合该背景图像，因为它们太宽了。因此，如果您选择适合该背景图像大小的其他图像会更好，可能是更多背景图像，因为通常您可以使用更薄的图像。请参阅下面我在我的一个网站上使用的示例。

正如 msigman 所说，您可以添加 repeat-x 以确保背景仅沿 x 轴重复，但如果您将 div 限制在某个高度并正确定位精灵，repeat-x 可能没关系，但更安全。