CSS滑動門和精靈與標籤導航 - 不看那麼標籤

Question

嘿，我試圖讓這個導航工作很好：

http://www.moreheadplanetarium.org/redesign/nav.html

我想不通爲什麼的背景圖像「當前」選項卡延伸到鏈接範圍之後。它不會在其他狀態下執行此操作（正常和懸停） - 我已經在這些狀態下使用不同的圖像對其進行了測試，因爲如果沒有該選項卡，您無法真正分辨出來。

這讓我瘋狂，認爲這項技術可以在活動和懸停的情況下工作，但不適用於「當前」項目上的特殊課程。幫助將不勝感激！謝謝〜

Answer 1

我不確定你如何認爲背景圖片可能會延伸到跨度後面而不是。跨度標籤是像這樣的錨的元素：

+-----------+ 
| +-----+| 
| |  || 
| +-----+| 
+-----------+ 

跨度標籤沒有錨標記外擴是這樣的：

+--------+ 
| +------+ 
| |  | 
| +------+ 
+--------+ 

它還對所有狀態相同，所不同的對於正常和懸停狀態來說，沒有可以看到錨背景的跨度背景的透明部分（除非你仔細觀察陰影）。

解決方法是不要在背景圖像上使用透明度。讓它堅實，看起來像背景上的陰影。

這也將解決雙影的問題。如果仔細觀察，會發現span標記中背景圖像的陰影被添加到錨標記中背景圖像的陰影中，導致它們重疊處的陰影變暗。在標籤的最左側，只有錨標籤的背景，陰影較淺。雙陰影效果在所有的選項卡上，但對於常規和懸停狀態，它非常微妙，您必須知道它在那裏才能看到它。