html - 如何将 CSS Sprite 用于重复背景图像？

Question

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

如果你在这里查看我的代码和演示 http://dabblet.com/gist/2263037

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

在那个 DIV 下面我有相同的 div 但这次我尝试使用 CSS Sprite 图像来代替

所以我的问题是，是否可以使用此 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

设置 Sprite

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

诀窍是您重复的背景必须延伸到 Sprite 图像的完整宽度。这是至关重要的。这是您的图片，经过修改以满足该标准:

设置 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;
}