如何创建更改状态的图像?

我想你说的是CSS精灵。下面是一篇单子之外的文章,让你开始: http://www.alistapart.com/articles/sprites . 基本思想是将所有图像合并为一个大图像。

通常你会有 img 应用背景图像的标记或小元素,现在将单个图像作为背景图像应用于多个元素,并且每个元素都具有不同的背景位置值,以将正确的图像定位到位置。这方面的一个例子是jQuery UI的图标-单个组合图像如下所示:

然后每个单独的图标共享一个类 backgroun-image 集合:

.ui-icon{width:16px;height:16px;background-image:url(../images/ui-icons_808080_256x240.png);}

以及个人 background-position 对于每个不同的图标:

.ui-icon-carat-1-n{background-position:0 0;}
.ui-icon-carat-1-ne{background-position:-16px 0;}
.ui-icon-carat-1-e{background-position:-32px 0;}
.ui-icon-carat-1-se{background-position:-48px 0;}

对于各个交互状态也可以这样做-更改上元素的背景位置 :hover ,则会得到不同的颜色或图标。

看看这个: http://josefaeti.com/tutorials/css/css-how-to-use-multiple-images-stored-in-a-single-file.html#box-0

而这个: http://www.alistapart.com/articles/sprites