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

您应该制作一个精灵，将图像彼此相邻放置在一个文件中，并调整：hover的背景位置。 CSS应该是这样的：

.navlink {
    background-image: url('image');
    background-position: top left;
}

.navlink:hover {
   background-position: top right;
}

添加CSS3过渡时，可以达到很酷的效果。 然后图像将滑动到翻转状态！

Answer 2

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

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

演示版

如果您在.navlink周围有一个父元素，则只需将height:100%并删除height:70px; 它将保持比例。 如果您想忽略比例而只填满父母，则可以同时设置height:100%和width:100%

编辑

因为我发现navlink都是<a> ：您无法进行background-attachment: fixed因为它使父级的背景发生变化，而不是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');
}

根据您在评论中提供的网站结构更新了演示

下次在编写问题时，您应该包括相关的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; 
}