CSS圖片替換，但在禁用圖片時顯示文字

我最近放置了一個工作導航欄。CSS圖片替換，但在禁用圖片時顯示文字

我很高興它，但不幸的是它無法訪問。

當圖像關閉時，我想在其位置顯示替換文字。

用我的例子很容易實現：http://pastebin.com/hXth7FSK？

非常感謝任何指針。

邁克爾

來源

2011-09-05 michaelmcgurk

爲什麼不使用真正的img 而不是背景圖片？這樣，您可以從Alt屬性中獲益（如果img關閉，將顯示文本）。 –

我總是推測使用作爲主導航是不好的做法。我可能是錯的。 – michaelmcgurk

你是。爲什麼會這樣？這就是爲什麼它具有可供視障人士閱讀的alt和標題。 – TigOldBitties

您可以絕對定位跨度裏面的元素，使得它涵蓋了文本this post from Dave Shea explains：

<h3 id="header" title="Revised Image Replacement"> 
    <span></span>Revised Image Replacement 
</h3> 

/* css */ 
#header { 
    width: 329px; 
    height: 25px; 
    position: relative; 
    } 
#header span { 
    background: url(sample-opaque.gif) no-repeat; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    }

唯一的限制是這不會對部分透明圖像的工作。

來源

2011-09-05 20:05:10 steveax

非常感謝，史蒂夫。我會在一秒鐘之內看一看。 – michaelmcgurk

隨着一點點jiggery-pokery，那就做了訣竅：http://pastebin.com/0JvcXr0S非常感謝指向我在正確的方向，史蒂夫:) – michaelmcgurk

@mcgarriers你可以接受答案然後;-) – steveax

如果你想加入這個CSS使用背景圖片（我喜歡的背景圖像，以及用於導航），你可以絕對超過其定位空白圖像：position: relative; z-index: 100;所有與導航元素背景圖片，然後將其放在它們中：

<img src="pixel.gif" alt="Text to display when images are off" style="width: 100%; height: 100%; position:absolute; top: 0; left: 0; z-index: 50;" />

然後，當圖像關閉時，空白圖像的alt文本將顯示。此圖片將在元素下，但當圖片關閉時，您將能夠看到圖片的替代文字。此外，這將適用於部分透明的背景圖像。可以使用this pixel.gif image。

希望這會有所幫助。

來源

2011-09-05 19:56:50 Nathan

現在這是一個非常有趣的理論。你能告訴我如何在我的HTML上下文中使用它嗎？感謝您的回覆。我認爲我們已經破解了它:) – michaelmcgurk

@mcgarriers所有你需要做的就是在你的每個菜單元素內添加上面的''代碼，並確保將CSS添加到菜單元素，內聯CSS或其餘的CSS。我試着在jsFiddle中做，但由於某種原因，當我添加菜單CSS時，它使一切都隱藏起來。當我完成後，我會繼續嘗試並向您發送網址。 Nathan，Coolness， – Nathan

我設法從史蒂夫的上面得到了一個可行的解決方案。但是如果你有時間的話，看看它會發生什麼很酷。再次感謝先生。 – michaelmcgurk

CSS圖片替換，但在禁用圖片時顯示文字

回答

相關問題