[問題] 這種寫法的用意在那裡?

[ljm71 (ljm71)]

在某個國外網站看到的圖片寫法


html部分

<h1 id="style"><span>this is text</span></h1>



css部分

#style{
background:url(image/top.gif) top left no-repeat;
width:400px;
height:20px;
}

#style span{
display:none;
}


我才剛開始學寫網頁

我不懂的是，為什麼要把圖片寫在h1內呢?

為什麼不直接用<img src="image/top.gif" />來寫呢?

這樣寫有什麼好處或優點呢?

謝謝

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 59.117.199.48
推 averywu:初步防右鍵抓圖吧，我想...
推 blackbing:哈沒錯～不過也只有一般使用者會覺得莫名其妙罷了
→ TonyQ:還有文繞圖吧～
推 superGA:就是在文字背景顯示圖片阿 很奇怪嗎?用<img>來做才奇怪吧
→ ljm71:唔~可是它又做了display:none的設定 所以讓我感到奇怪
→ ljm71:另外想請教一下 研究別人網頁的寫法 有什麼好方法嗎?
→ ljm71:每次開原始檔就落落長 頭好暈 @_@
推 gckenny:這是css技巧...FIR(圖片置換)
→ gckenny:請參考http://www.alistapart.com/articles/fir/
→ ljm71:請教一下 這技巧的功用就是防右鍵和文繞圖嗎?
推 gpmm:我怎麼看不出來這跟防右鍵抓圖有什麼關係 o_oa"
→ gpmm:而且跟文繞圖又有什麼關係？跟圖片置換又有什麼關係？  囧
→ gpmm:只是表達架構的規劃所以這樣而已吧  (￣□￣|||)a
推 Allenguy:SEO的技巧 加上結構清楚
→ ljm71:上面推文說有這些用途 所以...
推 aceone:這本來就是xhtml的正確寫法~不是嗎?
推 takumi412:會這樣做的原因為了達到XHTML結構化的緣故
→ takumi412:<h1>是結構上必須的, 可是因為視覺上美化的需求, 所以
→ takumi412:用CSS選擇器幫h1加上背景圖; 但是原有的文字(XHTML不可
→ takumi412:以省略元素的文字), 所以利用<span>包起來, 再用display
→ takumi412::none 來隱藏文字, 避免擋到h1的圖..  類似的手法還有
→ takumi412:text-indent: -9999px 的方式.. 大概很多人看不懂吧(汗)
推 Roodin:推樓上專業 這種作法真辛苦啊..
推 andrew43:FIR。在css zen garden的書中有非常仔細的介紹。
→ andrew43:比較重要的是，FIR有無障礙瀏覽的問題。要注意一下。
→ aceone:用text-indent:-9999px比較好，不會有親和性的問題～