CSS Sprites, Repeat-x问题

作者: rambus2   发布时间: 2009-02-26

作者: skyoxu   发布时间: 2009-02-26

作者: fantasy615   发布时间: 2009-02-26

css sprites的灵魂是background-position，而不是background-repeat;，除非你的背景图片小于容器的高宽。
如果repeat-x的次数能够知道最大值，就可以来模拟实现（有局限性）：

复制内容到剪贴板

代码:

<style type="text/css">
/*假设每颗星星宽高都为20px*/
span.star{display:inline-block;width:20px;height:20px;background:url(array.gif) -200px top repeat-x;}
/*这样显示出来了5颗星星*/
span.star.s5{width:100px;}
</style>
....
<span class="star s5"></span>

背景图（注意那5颗星星），这种方法有局限性，不能无限次平铺：

start.png (3.88 KB)

2009-2-26 09:48

作者: yoom   发布时间: 2009-02-26

我要做的刚好就是图片这样的效果，分了左中右3块，想把中间那块通过背景重复来做，用Sprites技术就做不到了。

附件

未标题-1.jpg (55.61 KB)

2009-2-26 14:03

作者: rambus2   发布时间: 2009-02-26

作者: birdstudio   发布时间: 2009-02-26

作者: yoom   发布时间: 2009-02-26

作者: birdstudio   发布时间: 2009-02-26

作者: yoom   发布时间: 2009-02-26

作者: yll1125   发布时间: 2009-02-26

示意图

附件

a.jpg (1.04 KB)

2009-2-26 14:27

作者: yll1125   发布时间: 2009-02-26

作者: zhutianyi   发布时间: 2009-02-26

作者: yoom   发布时间: 2009-02-26

强人这么多。。。不过我的图片是这样的，上面介绍的行不通，但是大概知道怎么做了，谢谢各位。

附件

bg.gif (10.79 KB)

2009-2-26 14:45

作者: rambus2   发布时间: 2009-02-26

作者: skyoxu   发布时间: 2009-02-26

作者: rambus2   发布时间: 2009-02-26

这个实现是比较简单的
让我们看看淘宝的
一整排来repeat-x不就可以了吗？

作者: lawzhangqi   发布时间: 2009-04-08

作者: moondy   发布时间: 2009-04-09

作者: qizhifei   发布时间: 2009-12-11

新手，来学习学习！

作者: hautbbs   发布时间: 2011-10-08