CSS/HTML <a>標籤最小尺寸和背景圖像

我有一個鏈接，將包括1圖像，沒有別的。我也需要這張圖片來突出顯示用戶懸停在它上面的情況。我在想：使用<a>標記並在CSS中設置其高度，寬度和背景圖像屬性。然而，（我有一種感覺，它可能會這樣做），當在瀏覽器中呈現時，標籤的大小是0x0。我可以在鏈接標記之間添加幾個個字符（並且圖像顯示正常），但感覺有點不方便。我也在考慮將1px透明圖像的舊技巧設置爲正確的大小 - 但這似乎還不夠正確的做法。我也可以用jQuery做同樣的事情（但這似乎是試圖用大錘殺死一隻蒼蠅）。CSS/HTML <a>標籤最小尺寸和背景圖像

是否有一種替代純粹的CSS/HTML方式來實現這一目標？

來源

2011-05-12 Nick Goloborodko

如果圖像只包含圖像，則圖像必須傳達目的鏈接。因此它必須是內容，而不僅僅是表示性的，所以它需要用''而不是'background-image'來表示。使用一個真實的圖像，並應用JS交換出來的突出顯示效果（假定突出顯示不像邊框，或可通過半透明應用更改）。 – Quentin 2011-05-12 11:12:40

將其設置爲display:block;，默認情況下將標記設置爲內聯顯示。然後你可以設置寬度和高度。

通過更改懸停時的背景位置或更改背景圖像，可以進行翻轉。

來源

2011-05-12 11:00:12

+1爲一個很好的答案。但是'display：inline-block;'會更好，因爲元素可以設置大小，但仍然是內聯的，所以它不會像'display：block;'這樣的頁面佈局混亂。 – Spudley 2011-05-12 11:04:29

這個伎倆！很好，謝謝！ – 2011-05-12 11:15:59

所以'a'標籤可以具有背景圖像屬性？ – ahnbizcad 2014-08-11 14:15:04

而對於背景圖片，您應該使用sprite map。這意味着要製作一幅由想要顯示的每幅圖像組成的大圖像，並僅將其中的一部分顯示爲背景。這非常有用，因爲它預先加載了懸停的圖像，因此用戶沒有任何延遲。我也發現，它組織了我的圖像目錄了一下（而不是每個按鈕的開/關圖像，我只有一個圖像）

來源

2011-05-12 11:06:05

這是如何解決'a'元素大小的問題？這是問題的核心部分。 – 2011-05-12 11:10:24

豐富的布拉德肖有答案，沒有什麼更多的添加（肯定有不同的方式來做到這一點）。但是，如果他只是說他會有這種滯後的懸停（我不知道你的情況，但我不喜歡去一個網站，並獲得） – 2011-05-12 11:14:41

因此，這是一個擴大他的答案的評論，然後，不一個答案。（一個有用的評論，不要誤解我的意思。） – 2011-05-12 11:30:06

CSS/HTML <a>標籤最小尺寸和背景圖像

回答

相關問題