如何使用Javascript + CSS分割图像？

Question

I have the image like this:

I want to split it into six squares, and I can keep looping to display the animation. Do you have any ideas to split the image by JS + CSS instead of using 6 separate image files.

Answer 1

Set it as a background image and manipule the background position.

Update: As seth mentioned, the technique is called CSS Sprites. Searching google for animation with css sprites turns up some good results.

Answer 2

这是SitePoint关于使用jQuery的精灵动画的一篇文章 。

Answer 3

There are at least two techniques

• Use image as background
• Use CSS clip

Here is a good example of use of first technique.