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