文本链接翻转时的 CSS 背景图像定位

Question

我有文本链接，我正尝试在鼠标悬停时使用背景图像(link.gif 是透明的，linkhover.gif 是鼠标悬停图像)。

我下面的代码是有效的，除了定位不是。

.navlink {
background:transparent url('graphics/link.gif') center top no-repeat;
height:70px;}

.navlink:hover {
background-image: url('graphics/linkhover.gif');}

Answer 1

尝试让背景占据整个尺寸，像这样

.navlink {
    background: url('graphics/link.gif');
    height:70px;
}

.navlink:hover {
    background: url('graphics/linkhover.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
}

Demo

如果你有一个围绕.navlink的父元素, 然后你可以把 height:100%并删除 height:70px;它将保持比例。如果你想忽略比例而只是让它填充父级，你可以同时放置 height:100%和 width:100%

编辑

自从我发现 navlink都是<a> : 你不能有 background-attachment: fixed因为它使 parent 的背景发生变化而不是 navlink的(我不知道是什么原因)

更新代码

.navlink {
    text-align:center;
    background: url('graphics/link.gif');
    background-repeat: no-repeat; /* This applies to :hover as well */
    background-position: center; /* This applies to :hover as well */
    text-decoration: none; /* To remove the underline */
}
.navlink:hover {
    background: url('graphics/linkhover.gif');
}

Updated demo根据您在评论中提供的网站结构

下次写问题时，您应该包含相关的 HTML，这样可以更轻松地帮助您解决问题

编辑 2

玩了一些游戏后，我相信我已经按照您想要的方式使用了您的网站:

.navlink {
    padding-top:30px;
    text-align:center;
    background: url('graphics/link.gif');
    text-decoration: none;
}
.navlink:hover {
    background: url('graphics/linkhover.gif');
    background-position: center -55px;
    background-repeat:repeat-y;/*This is optional, taking it out makes it repeat*/
    text-decoration: none; 
}