如何使用CSS精灵重复背景图像？ [英] How to use a CSS sprite for a Repeating background image?

问题描述

这是我在过去遇到的麻烦，它在我的脑海里，所以我做了一个简单的示例sprite图像测试，并希望得到一些答案。

This is something that I have had trouble with in the past and it's on my mind so I made a simple example sprite image to test and hopefully get some answers with.

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

If you view my code and demo here http://dabblet.com/gist/2263037

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

You will see that I have a simple div that uses a background image

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

Below that DIV I have the same div but this time I attempt to use a CSS Sprite image instead

所以我的问题，是可能复制第一个DIV使用这个精灵图像的外观或需要的变化Sprite图片？

So my question, is it possible to replicate the look of the first DIV using this sprite image or are changes needed on the sprite image?

没有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>

推荐答案

设置精灵

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

Setting up the sprite

You can use an image sprite to do what you want. They can only repeat along one axis, i.e. repeat-x, but in your case that's all you need. Also your image within the sprite must run the entire width, this is how the browser knows to tile it.

诀窍是您的重复背景必须跨越您的sprite图片的 FULL WIDTH 。这是至关重要的。这是您的图片，修改后符合该条件：

The trick is your repeated background must extend across the FULL WIDTH of your sprite image. This is crucial. Here is your image, modified to meet that criterion:

现在我们只是像往常一样引用它将工作正常：

Now we just reference it as usual, and it will work fine:

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

这篇关于如何使用CSS精灵重复背景图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！