如何创建一个改变状态的图像？

Question

创建显示各种状态的HTML图像的最佳方法是什么（例如，按钮：正常，悬停，选定，禁用）？ 理想情况下，我想通过CSS类（包括:hover元类）来完成。

此外，我已经看到多个状态组合成一个图像（这使得图像预加载更容易），但我不知道如何根据需要显示图像的单个切片。

谢谢！

Answer 1

检查出来：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

Answer 2

我假设你在谈论CSS Sprites。这是一篇A List Apart文章，可以帮助您入门：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上元素的背景位置，并获得不同的颜色或图标。