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

你应该制作一个精灵，将图像彼此相邻放在一个文件中并调整背景位置：悬停。 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%;
}

Demo

如果您在.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'); }

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

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

2 个答案: