1

我有文本链接，我试图在翻转时使用背景图像（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');}
4

2 回答 2

0

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

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

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

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

于 2013-08-24T22:27:58.787 回答
0

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

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

编辑

因为我发现navlinks 都是<a>：你不能拥有background-attachment: fixed，因为它使父母的背景发生变化而不是navlink's （我不知道是什么原因）

更新代码

.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; 
}
于 2013-08-24T22:35:14.737 回答