html – 如何使用CSS sprite重复背景图像？

概述这是我过去遇到麻烦的一件事,在我心中,所以我做了一个简单的例子,精灵图片来测试,并希望得到一些答案. 如果您在这里查看我的代码和演示 http://dabblet.com/gist/2263037 你会看到我有一个使用背景图像的简单div 在DIV下面我有相同的div,但是这次我尝试使用CSS Sprite图像 所以我的问题是,可以使用这个精灵图像复制第一个DIV的外观,还是精灵图像上需要的更改？ 这是我过去遇到麻烦的一件事,在我心中,所以我做了一个简单的例子,精灵图片来测试,并希望得到一些答案.

如果您在这里查看我的代码和演示
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 >        <p><strong>NOTICE:</strong> This is just a test notice,no reason to be alarmed</p> </div><BR><BR><BR><div >        <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;}

总结

以上是内存溢出为你收集整理的html – 如何使用CSS sprite重复背景图像？全部内容，希望文章能够帮你解决html – 如何使用CSS sprite重复背景图像？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。