这是我过去遇到麻烦的一件事,在我心中,所以我做了一个简单的例子,精灵图片来测试,并希望得到一些答案.
如果您在这里查看我的代码和演示
http://dabblet.com/gist/2263037
你会看到我有一个使用背景图像的简单div
在DIV下面我有相同的div,但是这次我尝试使用CSS Sprite图像
所以我的问题是,可以使用这个精灵图像复制第一个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;
}
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,但在你的情况下,这就是你所需要的.此外,您的精灵中的图像必须运行整个宽度,这是浏览器知道如何平铺它.
诀窍是您的重复背景必须延伸到您的精灵图像的全部宽度上.这是至关重要的.这是你的形象,修改为符合这个标准：
设置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;
}
