將CSS背景圖像重複懸停在錨標記上

我在mac上遇到了這個問題，最近我遇到了只有mac的大膽字體問題，但是這個問題已經通過CSS修復。將CSS背景圖像重複懸停在錨標記上

問題：我有10個錨定標記絕對定位，當懸停（綠色背景圖像）時，PC上沒有任何重疊問題，但在幾乎所有瀏覽器的Mac上，圖像在下一句中重疊一點。

enter image description here

CSS爲上述（懸停）：各元素的

.homeText a:hover { 

    background-image: url('/cont-img/on-hover-span_background-partial-solid.jpg'); 
    color: White; 
    cursor: pointer; 
    background-position: center; 
    background-repeat:repeat; 
    margin-right:-5px; 
    font-style: italic; 
}

的CSS絕對定位有大量的句子之間的空間，所以這不是一個問題。另外，最後的時間段是2個不同圖像的精靈，懸停的白色時段和懸停的灰色時段。爲此，我將一個CSS類添加到定位標記末尾的span標記中，該標記爲span標記中的精靈設置背景位置。

有什麼想法？

來源

2012-03-27 Ben Sewards

很高興有一個[jsfiddle]（http://www.jsfiddle.net）重新生成您的情況。將「overflow：hidden」添加到錨時會發生什麼？當你可以簡單地使用'background-color'時，爲什麼你會使用純色背景圖片？ – 2012-03-27 19:31:11

我需要某種顏色來匹配相應的圖像橫幅，並且由於碰巧沒有接近網頁安全顏色的位置，純色的背景圖像是唯一的其他解決方案。我會嘗試溢出隱藏。我認爲問題在於當錨點變成斜體時，長度會增加。 – 2012-03-27 19:37:40

你說你使用絕對定位，是嗎？那你怎麼定位你的錨？我的意思是，你怎麼知道把它們放在哪裏？ – 2012-03-27 19:38:44

因爲我在每個錨點內都有一個span標記，所以我意識到我必須在Timmerz的幫助下從每個個案中刪除填充和邊距。我獲得比預期更多的背景圖像重疊的最重要原因是因爲跨度的寬度對於週期僅佔用的像素量而言不必要的大，從而爲重疊創建更多空間。

將spans設置爲與精靈圖片成比例的寬度後，我添加了一個小補丁，使得背景圖像不會與sprite太靠近。另外，由於上述調整，我必須調整我對正確案件的絕對立場。

感謝大家的貢獻。

來源

2012-03-28 13:46:27

確保您有padding:0; margin:0;並確保<a>在該期限後沒有包含空格。另外，爲什麼你使用背景圖片？你不能只設置background-color:green？...你可能想嘗試一下，看看它是否有任何不同。

來源

2012-03-27 19:32:18 Timmerz

我需要某種顏色來匹配相應的圖像橫幅，並且由於它恰好沒有接近網頁安全顏色的位置，因此純色的背景圖像是唯一的其他解決方案。我可以嘗試刪除保證金，並通過絕對定位進行更改。我會讓你知道那是怎麼回事。 – 2012-03-27 19:36:43

是有道理的。讓我知道事情的後續。 – Timmerz 2012-03-27 19:38:35

我想我遇到的問題是我在每個錨的末尾都有一個span標記，並且span標記不會在錨標記內部生成任何空間。因此，如果我只是使用絕對定位，而沒有跨度CSS上的任何邊距和填充，則跨度不會出現。 – 2012-03-27 19:55:08

我相信這只是一個字體問題。當我在Linux中訪問您的網站時，它們之間的鏈接比Windows中的要多得多。順便說一句，也許有點偏離主題，但是你的網站不能非常好地處理非白色背景顏色。您可能想要自己設置背景顏色，而不是依賴用戶的默認設置。

來源

2012-03-27 19:52:09

它是背景圖像，而不是顏色。因此我自己渲染「顏色」。我想我遇到的問題是我在每個錨的末尾都有一個span標記，並且span標記不會在錨標記內部生成任何空間。所以如果我只是使用絕對定位，沒有任何邊距和填充，跨度不會出現。 – 2012-03-27 19:54:38

對不起，我應該已經發布了所有的CSS： -/ – 2012-03-27 19:55:39

不，我的意思是網站本身的背景顏色，它保留爲用戶的偏好設置，而其上的文本爲深灰色。衝突。使用'body {background-color：white}'。 – 2012-03-27 19:58:52

將CSS背景圖像重複懸停在錨標記上

回答

相關問題