作者ljm71 (ljm71)
看板Web_Design
標題[問題] 這種寫法的用意在那裡?
時間Fri Dec 14 16:19:52 2007
在某個國外網站看到的圖片寫法
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
1F：推 averywu:初步防右鍵抓圖吧，我想... 12/14 16:32
2F：推 blackbing:哈沒錯～不過也只有一般使用者會覺得莫名其妙罷了 12/14 16:40
3F：→ TonyQ:還有文繞圖吧～ 12/14 16:42
4F：推 superGA:就是在文字背景顯示圖片阿 很奇怪嗎?用<img>來做才奇怪吧 12/14 16:46
5F：→ ljm71:唔~可是它又做了display:none的設定 所以讓我感到奇怪 12/14 16:54
6F：→ ljm71:另外想請教一下 研究別人網頁的寫法 有什麼好方法嗎? 12/14 16:56
7F：→ ljm71:每次開原始檔就落落長 頭好暈 @_@ 12/14 16:57
8F：推 gckenny:這是css技巧...FIR(圖片置換) 12/14 17:04
10F：→ ljm71:請教一下 這技巧的功用就是防右鍵和文繞圖嗎? 12/14 18:07
11F：推 gpmm:我怎麼看不出來這跟防右鍵抓圖有什麼關係 o_oa" 12/14 18:18
12F：→ gpmm:而且跟文繞圖又有什麼關係？跟圖片置換又有什麼關係？ 囧 12/14 18:19
13F：→ gpmm:只是表達架構的規劃所以這樣而已吧 (￣□￣|||)a 12/14 18:21
14F：推 Allenguy:SEO的技巧 加上結構清楚 12/14 18:37
15F：→ ljm71:上面推文說有這些用途 所以... 12/14 18:46
16F：推 aceone:這本來就是xhtml的正確寫法~不是嗎? 12/14 20:12
17F：推 takumi412:會這樣做的原因為了達到XHTML結構化的緣故 12/14 22:15
18F：→ takumi412:<h1>是結構上必須的, 可是因為視覺上美化的需求, 所以 12/14 22:17
19F：→ takumi412:用CSS選擇器幫h1加上背景圖; 但是原有的文字(XHTML不可 12/14 22:18
20F：→ takumi412:以省略元素的文字), 所以利用<span>包起來, 再用display 12/14 22:18
21F：→ takumi412::none 來隱藏文字, 避免擋到h1的圖.. 類似的手法還有 12/14 22:19
22F：→ takumi412:text-indent: -9999px 的方式.. 大概很多人看不懂吧(汗) 12/14 22:20
23F：推 Roodin:推樓上專業 這種作法真辛苦啊.. 12/15 00:51
24F：推 andrew43:FIR。在css zen garden的書中有非常仔細的介紹。 12/16 15:13
25F：→ andrew43:比較重要的是，FIR有無障礙瀏覽的問題。要注意一下。 12/16 15:15
26F：→ aceone:用text-indent:-9999px比較好，不會有親和性的問題～ 12/17 00:11