使用CSS创建菜单按钮

Question

我正在使用HTML和CSS创建网页。我想创建一个我已有的.gif文件的按钮。我使用div来将项目放置在页面本身中。如何使用图像，并使用翻转功能，以便图像更改为具有不同颜色的不同图像。

谢谢。

Answer 1

更改图片url的作品，但如果图片未预加载或用户的缓存被禁用，可能是一个讨厌。

检查出精灵FTW。

http://css-tricks.com/css-sprites/

子画面的快速定义是一个大的图像，包含几个较小的图像。因此，一张10x20的图像，正常状态是10x10的上限，而悬停状态是较低的10x10。用户只能看到上10×10，由于CSS：

.button 
{ 
    display: block; 
    width: 10px; 
    height: 10px; 
    background-image: url(to-image.gif); 
    background-repeat: no-repeat; 
    background-position: top left; 
} 

然后悬停，它转移到图像

.button:hover 
{ 
    background-position: bottom left; 
} 

Answer 2

使按钮元素为固定大小，并将.gif文件设置为CSS中的元素背景。然后，您可以在元素上使用：hover类来更改图像。这里我使用“A”标签，因此它可以在IE6上运行。

<a class="button"></a> 

.button { 
    display: block; 
    background-image: url(default.gif); 
    width: 100px; 
    height: 20px; 
} 

.button:hover { 
    background-image: url(hover.gif); 
}