CSS背景圖像定位文本鏈接翻轉

我有文字鏈接，我試圖使用翻轉背景圖像（link.gif是透明的，linkhover.gif是翻轉圖像）。CSS背景圖像定位文本鏈接翻轉

我下面的代碼正在工作，但定位不是。

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

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

來源

2013-08-24 Julie

嘗試使背景佔用全尺寸，這樣

.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 s爲所有<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時，這將使它更容易幫助你的問題

EDIT 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-24 22:35:14

這將有助於看到期望的結果，所以我們可以進一步幫助 –

嗯..這做了一些事情，但不是我想要的東西..我有幾個鏈接（主導航全部在整個網站的頂部連續排列），每個都有導航，因爲它是類。這段代碼看起來像是在所有鏈接的背景中延伸了一張圖片。 – Julie

這是我現在擁有的： '.navlink {padding-left：30px; line-height：70px; 背景：透明的url（ '圖形/ link.gif'）中心頂部NO-重複;} .navlink：懸停{ 背景圖像：網址（ '圖形/ linkhover.gif'）;}' 這裏是我正在使用的網站：http：//domakitchencafe.com/website2。0/ 我試圖讓文本鏈接（跨越頂部）向下移動，這樣小圖形就會在它們上面。我仍然需要把它放在他們之上。 – Julie

您應該製作一個精靈，將圖像放在一個文件中並調整背景位置：hover。 CSS應該是這樣的：

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

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

添加CSS3轉換時可以達到很酷的效果。圖像將滑入翻轉狀態！

來源

2013-08-24 22:27:58 jvakuiler

CSS背景圖像定位文本鏈接翻轉

回答

相關問題