Question

Here是一个图像文件中的图标集。 here是另一套。

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

这是CSS只使用一个图标：

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

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

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

Answer 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>

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

Answer 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?

如何使用不同图像文件中的一个图标？

5 个答案: