repeat-x的妙用

(图1.2 text.png)

假如div (id='text')是一个文本框，text.png是他的背景图，但是这个背景图就100*200px这莫大。

但是我们要让div的宽度随着文本框的字数增加而增加，那么问题来了，突然发现背景图不够长，怎么办？

解决方法:

 我们可以把这个背景图切为3份，左边带边框的一份 a, 中间的一份b，带箭头的一份c；

在div(id="text")的div中添加3个小div，分别我leftDiv,middleDiv,rightDiv,3个div的背景图分别为背景图a,b,c

设置middleDiv的background属性值 repeat-x(平铺)；然后设置middleDiv的min-width就是可实现div变宽后，背景图任然正常显示。

 

(如有错误的地方或更好的解决办法，希望批评指正)。

(滴水穿石)