当前位置:编程学习 > html/css >>

详细讲解网页制作中常用的图像替换技术

一、实际应用

二、图像替换
我们并不总是要文字呆在背景图像之上,很多作品都故意隐藏了标题等元素中的文本,取而代之的是一幅生动的图像。
设计师能够用一张背景图像替代某元素中的原始文字,以期显示出更美观的字体。为了表示对发明者Todd Fahrner的尊重,这个技巧随后也被叫做“Fahrner图像替换(Fahrner Image Replacement,FIR)”。该技巧的实现非常简单:用span将元素中的文本包围起来,然后通过应用CSS样式隐藏这个span中的文本,最后将背景图像应用到该元素之上即可。例如,对于下面的这一段HTMl标记:
<h1 id="pageHeader"><span>zzzyk.com</span></h1>
我们可以使用下面的这段CSS容易地实现图像替换:
#pageHeader {
background: url(lemonfresh.gif) top left no-repeat;
width: 400px;
height: 20px;
}
#pageHeader span {
display: none;
}
通过使用CSS的display: none或visibility: hidden; 所以在#pageHeader 元素中的span元素都被隐藏起来。Hellsing同时使用了上述两种CSS设定——但它们的效果却是一致的。图像替换技术非常强大且很快开始流行——若是没有了它,我们甚至无法建立禅意花园。该技术可以说是实现复杂、灵活CSS布局的一埠最为重要基石。
三、图像替换技术责任
图像替换技术使用display: none;本意并不只是想要替换文本,这样做还有一些更深层次的理由。实际上,若是没有任何提示或帮助,计算机就无法认出或读取图像中包含的文字。例如HTML中的img元素,若是没有了alt属性,那么对于Google等搜索引擎,以及辅助浏览设备(例如,阅读器即可阅读页面内容,并以声音的形式告知浏览者)之类无法呈现图像的客户端来说,将变得毫无意义。而图像替换技术则保留了被替换元素中的原有文本,因此无论对何种客户而言,理解页面内容都不成问题。
但图像替换技术还有一个问题:Google能够读取到隐藏的文本,而有些屏幕阅读器却不能。图像替换技术的本意是让视觉不便用户也能够获取图像传递的信息,但实际上它却没有达到预期的目标。不但如些,若用户在浏览器中禁用了图像,但却仍保留CSS,那么屏幕上将什么都不会显示。且之些额外的span也增加了页面文件的大小,虽然并没有丈大的影响,但毕竟水够理想。
四、更好的技术
随着图像替换技术一天天地流行起来,这些问题也渐渐开始受到越来越多的人的关注。有没有这样一种技术,既可以为普通浏览者隐藏一些不必要的元素,也能将这些信息给需要的人呢?幸运的是,几乎在图替换技术开始流行的同时,另外一些替代的技术也开始走向成熟。其中有些在实现凶一些最为基础的要求的同时,也留下了一两个悬而未决的显著问题:而另一些则需要大量的CSS技巧及hack来实现跨浏览器兼容。在撰写本书时,沿没有一种完美的替代方案出现,我们只能在权衡利弊之后,根据实际需要在这些现有的方案中进行挑选。
第 1 2 3 页
补充:Css教程,样式布局 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,