CSS精灵背景重复

Question

背景图像重复-x或y对我不起作用。

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。如何解决此问题？这种为sprite编写css的类型是优化的吗？

谢谢。

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

Answer 1

您有固定宽度的重复图像，例如：（repeat-x表示宽度：1px；逐个图像）（repeat-y表示高度：1px，浮动图像），以提供完美的图像，也可以正确重复。）