Question

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

感谢。

Answer 1

更改图片网址有效，但如果未预先加载图片或禁用用户缓存，则可能会造成麻烦。

查看sprites FTW。

精灵的快速定义是一个包含几个较小图像的大图像。所以10x20图像，正常状态是上部10x10，悬停状态是下部10x10。由于CSS，用户只能看到上面的10x10：

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

使用CSS创建菜单按钮

2 个答案: