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.

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

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

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

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

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

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

在DIV下面我有相同的div,但这次我尝试使用CSS 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?

所以我的问题是,是否可以使用此精灵图像复制第一个DIV的外观,或者是精灵图像需要更改?

Without 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;
}

With Sprite image

使用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>

2 个解决方案

#1

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.

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

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:

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

Setting up the CSS

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精灵重复背景图像？

2 个解决方案

#1

Setting up the sprite

Setting up the CSS

更多相关文章

随机推荐