代码之家 › 专栏 › 技术社区 › Tony the Pony

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

image css-selectors css html

2

Tony the Pony · 技术社区 · 15 年前

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

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

谢谢!

2 回复 | 直到 15 年前

1

3

Yi Jiang G-Man 15 年前

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

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

alt text

然后每个单独的图标共享一个类 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

3

bcosca 15 年前

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