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

Question

这是我过去遇到麻烦的事情,这是我的想法,所以我做了一个简单的sprite图像测试,希望得到一些答案.

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

诀窍是你的重复背景必须延伸到精灵图像的全宽度.这很关键.这是您的图片,经过修改以符合该标准:

设置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可能无关紧要,但它更安全.