如何使用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;
}

使用Sprite图像

/* 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，但在你的情况下，这就是你所需要的。此外，精灵中的图像必须运行整个宽度，这是浏览器知道如何平铺它。

技巧是你的重复背景必须延伸到精灵图像的 FULL WIDTH 。这很关键。这是您的图片，经过修改以符合该标准：

设置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可以没关系，但它更安全。