CSS創建內嵌圖像翻轉

我目前使用這個當前HTML標記與JavaScript來創建一個內嵌的圖像文字鏈接

<div><a id="link" href="page.html" 
     onmouseover="rollover(this.id,'over');" 
     onmouseout="rollover(this.id,'out')" 
    >Link</a><img id="linkButton" src="image.gif" /></div>

重要的是，該圖像是內聯這樣我就可以輕鬆地創建帶有文本的不同長度的新文本鏈接。

我想嘗試並獲得這個沒有JavaScript實現，並使用含側翻過來，出狀態的單個圖像，因此可能使用的背景位置伎倆。

來源

2013-01-05 user1209203

一些額外提示如果您知道'背景position'「絕招」，你有實現這個什麼問題？你卡在哪裏？ –

問題是，它不僅僅是一個圖像鏈接，它之前有不同長度的文本，所以我不能僅僅影響A標籤的背景圖像。 – user1209203

那你爲什麼不展示這個標記的例子？請給我們一個關於你在做什麼的想法。 –

您需要在CSS中使用background-image（或只是background）。這裏的關鍵是使用鏈接元件上僞類的例子http://www.webvamp.co.uk/blog/coding/css-image-rollovers/

。例如：

a:hover 
a:active 
a:visited

您還可以使用inline-block，使得a不完全塊元素。您可能需要爲其設置寬度和高度。請記住，在IE7中，display:inline-block不起作用，如果你仍然需要支持。

下面是使用CSS Sprites

來源

2013-01-05 00:10:30 user1337

但是，當A鏈接的寬度根據使用的文本量而變化時，我應該在哪裏應用背景樣式。 – user1209203

你會將它應用到'a'。你認爲是什麼問題是由可變寬度引起的？背景重複？如果是這樣，你可以設置'了background-repeat：不重複;' – user1337

的問題是圖像的文字的權利，我不能設置背景恆定的左/右位置有時需要對於更長的文本更接近右側。 – user1209203

CSS創建內嵌圖像翻轉

回答

相關問題