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);}

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