如何创建改变状态的图像？答案

【问题标题】：How to create an image that changes state?如何创建改变状态的图像？
【发布时间】：2010-11-22 15:37:41
【问题描述】：

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

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

谢谢！

【问题讨论】：

对不起，您所说的“HTML 图像”究竟是什么意思，因为我猜，使用 CSS 的“背景”属性来处理不同样式的简单解决方案并不是您要找的.

标签： html css css-selectors image

【解决方案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);}

以及每个不同图标的单独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 上元素的背景位置，您会得到不同的颜色或图标。

【讨论】：

【解决方案2】：

看看这个：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

【讨论】：