CSS Sprite背景重复

Question

背景图片repeat-x或者对我不起作用。

HTML：

<div id="box">
 <div class="t"></div>
 <div class="m"></div>
 <div class="b"></div>
</div>

CSS：

#box{width:220px; height: 230px; margin:0 auto; }
#box .t {width:220px;height:40px; margin:0 auto;background-image:url(../images/main.png) ;background-position:0 0; background-repeat:no-repeat;}
#box .m {width:220px;height:180px; margin:0 auto;background:url(../images/main.png) repeat-x  0 -40px;} */repeat-y */
#box .b {width:220px;height:10px; margin:0 auto;}

此打印仅m级的背景，无重复-x或y。如何解决这个问题？ 这种用于精灵的写css是否经过优化？

感谢。

在线演示：http://jsfiddle.net/cAbYF/

Answer 1

你有固定宽度的重复图像ex :( repeat-x表示宽度：1px;逐个图像）（repeat-y表示高度：1px;浮动图像），以提供完美的图像，它也可以正确重复。）