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

这是我在过去遇到过的问题，它在我的脑海中，所以我做了一个简单的例子精灵图像进行测试，希望得到一些答案

如果您在这里查看我的代码和演示

您将看到我有一个使用背景图像的简单div

在这个DIV下面，我有相同的DIV，但这次我尝试使用CSS精灵图像

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

无精灵图像

/* 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;
}

带精灵图像

/* 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>

注意：这只是一个测试通知，没有理由惊慌





注意：这只是一个测试通知，没有理由惊慌

我认为在这种情况下，您必须将精灵放在它自己的行上。这应该是可行的，因为您的图像被垂直约束到一个设定的高度。至少在示例中是这样的

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

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

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

设置精灵 您可以使用图像精灵来执行您想要的操作。它们只能沿一个轴重复，即重复x，但在您的情况下，这就是您所需要的。此外，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;
}

---

我现在明白你的意思了，我在这里做了另一个演示，上面有我之前的两个例子，加上一个使用新sprite和repeat-x的新Emple，你可以看到div太宽了，很遗憾你不能做我想做的事情。是的，sprite很难处理，你必须非常小心地定位图像。你能让它工作吗？这应该是可以做到的。如果没有，让我知道你被困在哪里。我有一个更新的演示与我所有的尝试和3个不同的图像在这里我认为这是不可能的。这是可能的，我已经为你上传了一个新的精灵文件和相关的代码。它应该像你期望的那样工作。@jasondavis，正如msigman所说，这是可能的，你只需要像msigman在回答中所做的那样调整你的形象。试着在你的涉猎中使用他的形象。它应该会起作用。除非我误解了你的问题。