作者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