如何使用来自不同图像文件的一个图标？答案

【问题标题】：How to use one icon from different image files?如何使用来自不同图像文件的一个图标？
【发布时间】：2011-11-08 08:27:43
【问题描述】：

Here 是一个图像文件中的一组图标。而here 是另一组。

如何使用来自一个文件的图标创建一个链接 (a href)，悬停时它应该从另一个文件（相同位置）和点击时获取图标 - 从第三个文件？

这是只使用一个图标的 CSS：

width: 16px;  
height: 16px;  
background-image: 
url(images/ui-icons_222222_256x240.png); 
background-position: -32px -128px;

【问题讨论】：

标签： jquery html css

【解决方案1】：

您所要做的就是为链接的不同状态定义样式：

a:link,a:visited { /* for regular non-hovered, non-active link styles */
    width: 16px;  
    height: 16px;
    background-image:
    url(images/defaultStateImage.png); 
    background-position: -32px -128px;
}

a:hover { /* for hover/mouse-over styles */
    url(images/hoverStateImage.png); 
    background-position: -32px -128px;
}

a:active { /* for click/mouse-down state styles */
    url(images/clickStateImage.png); 
    background-position: -32px -128px;
}

【讨论】：

如果你更新到更新的 jQuery UI 并且他们改变了他们的图标图像，我猜你也必须在这里调整背景位置，对吧？

【解决方案2】：

使用选择器，并将 a:active 更改为正确的图像（您只链接到两个）

a:link, a:visited {
    width: 16px;  
    height: 16px;  
    background-image: url(images/ui-icons_222222_256x240.png); 
    background-position: -32px -128px; 
}
a:hover {
    background-image: url(images/ui-icons_888888_256x240.png); 
}
a:active {
    background-image: url(images/ui-icons_888888_256x240.png); 
}

【讨论】：

【解决方案3】：

您必须为每个图标集（在本例中为三个）定义背景图像，并为您要使用的每个图标定义背景位置要使用。（假设图标模板的图标位置相同）

另外，我不建议您使用通用链接选择器a，而是为图标按钮分配一个类，因为您可能有其他图标集/链接：

a.icon:link,
a.icon:visited

a.icon:hover

a.icon:active

以下是.icon 类的一般定义示例和一个按钮：

a.icon:link, a.icon:visited {
    width: 16px;  
    height: 16px;  
    background-image: url(images/ui-icons_222222_256x240.png);
}
a.icon:hover { background-image: url(images/ui-icons_888888_256x240.png); }
a.icon:active { background-image: url(images/ui-icons_454545_256x240.png); }

.button1 { background-position: 0px 0px }
.button2 { background-position: 16px 0px }
.button3 { background-position: 32px 0px }
/// etc.. for each button

使用图标：

<a class="icon button1"></a>

【讨论】：

click 伪类不存在，它是 active。

【解决方案4】：

只需创建另一个选择器。例如：

a
{
    width: 16px;  
    height: 16px;  
    background-image: url(images/ui-icons_222222_256x240.png); 
    background-position: -32px -128px;
}

a:hover
{
    background-image: url(images/ui-icons_888888_256x240.png); 
    background-position: -32px -128px;
}

关于点击事件，我不是 100% 确定，但我认为就是那个

a:active
{
    background-image: url(images/ui-icons_CLICK_IMAGE_HERE_256x240.png); 
    background-position: -32px -128px;
}

【讨论】：

【解决方案5】：

根据您的精灵图像，您可以使用单个精灵图像执行此操作。

像这样：

a{    
    width: 16px;  
    height: 16px;  
    background-image: url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/images/ui-icons_222222_256x240.png);
    background-position: -32px -128px; 
    display:block;
}

a:hover{
    opacity:0.5;
}

查看http://jsfiddle.net/vERDH/3/

也检查一下How to make a single image, treated as three different images?

【讨论】：

【解决方案6】：

您最好的方法是将其视为任何其他语义元素，然后将其样式化为按钮。

HTML：

<a class="icon icon-travel" href="/travel">Travel Offers</a>

CSS：

a.icon {
    background: none 0 0 no-repeat;
    width: 16px;  
    height: 16px;  
    text-indent: -10000px;
    display: inline-block; }
a.icon-travel {
    background-image: url(images/ui-icons_222222_256x240.png);
    background-position: -32px -128px; }
a.icon-travel:hover { background-image: url(images/ui-icons_888888_256x240.png); }

【讨论】：