這是一個「有效」的CSS圖像替換技術？

我剛剛想出了這個，似乎在所有現代瀏覽器的工作，我只是測試它，然後在（IE8 /兼容性，鉻，野生動物園，萬盎司）這是一個「有效」的CSS圖像替換技術？

HTML

<img id="my_image" alt="my text" src="images/small_transparent.gif" />

CSS

#my_image{ 
    background-image:url('images/my_image.png'); 
    width:100px; 
    height:100px;}

Pro的：

圖片ALT文字的最佳實踐的可訪問性/ SE Ø
沒有多餘的HTML標記，而CSS是相當小太
得到周圍的CSS上/圖像關問題，即「TEXT-INDENT」技術隱藏文本從低帶寬用戶

最大的缺點我能想到的是關於情況的css/images，因爲你只會發送一個透明的gif。

我想知道，誰使用沒有樣式表的圖像？某種手機什麼的？

我正在爲澳大利亞地區（距離最近的城市數百公里）的客戶建立一些站點，許多用戶將遭受撥號連接，而且經常過時的瀏覽器，因此「圖片關閉」問題是重要的考慮因素。

這種技術有沒有其他副作用，我沒有考慮過？

編輯：只是想添加額外的信息，我會用這個在一個正常的圖像標籤，因爲

答：我可以使用CSS的精靈

B.我可以生成與CSS php使用單個陣列在不同子域之間交替使用背景圖像源

C.我喜歡現在調整圖像大小的方式不會拉伸或扭曲圖像，因此它的行爲與頁面上的其他所有內容一樣。

來源

2010-04-14 David Meister

我真的很感謝「誰使用沒有樣式表的圖像？」的答案。我想不出任何理由，我所能想到的所有例子都是「沒有css /沒有圖像」或「css但沒有圖像」，但可能有一些明顯的我失蹤了。 – 2010-04-14 13:44:27

正常圖像標籤有什麼問題？ img標籤意味着當你的內容有圖像時使用，而CSS不應該參與實際內容的任何部分。另一方面，應該將表現圖像設置爲div的背景圖像，然後通過CSS處理，以便它們不干擾內容和結構標記。

你不需要做那樣的事情。

如果你想圖像替換技術，緩慢下降，當CSS關閉時，你可以使用舊的忠實文本縮進技術：

#element { 
    width: 100px; 
    height: 100px; 
    background: image(pic.jpg); 
    text-indent: -9999px; 
} 

<div id="element">This text will show if CSS is off, otherwise an image is displayed.</div>

來源

2010-04-14 13:24:15

哦，是的，它與我寫的一個簡短的PHP腳本一起傳播跨多個域的CSS背景圖像。 – 2010-04-14 13:26:42

你有沒有看過我寫的關於文本縮進的問題？我試圖避免當某人開啓了CSS，但關閉了圖像時導致的問題。 – 2010-04-14 13:37:30

大肚是正確的，但你似乎並不需要縮進。只需把你想要的圖像作爲img的src。然後當圖像關閉時獲得文本（並注意，替代文字可以在img上使用CSS進行設置），並在獲取圖像時顯示圖像。

'圖像替換方法'的重要之處在於，人們在設計標題時希望文本脫離alt屬性，以便正確搜索索引。 IMG本身雖然會做任何CSS或額外的標記工作。

來源

2010-04-14 16:47:37

那麼我在h1/h2標籤中使用這種技術，當客戶想要奇怪的字體。繼承人我該怎麼做http://flowdev.tumblr.com/post/1187111884/the-power-of-h1-and-h2-tags

據我所知在所有瀏覽器中都能正常工作。

來源

2010-09-25 21:18:53 Olical

這是一個「有效」的CSS圖像替換技術？

回答

相關問題