html - 如何创建改变状态的图像？

Question

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

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

谢谢!

Answer 1

我假设您正在谈论 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);}

以及每个不同图标的单独背景位置:

.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 上元素的背景位置，您将获得不同的颜色或图标。