一起CSS

当前位置:一起CSS > CSS > 文章正文

CSS图像替换技术

日期:2008-09-5 分类:CSS

图像替换就是隐藏元素中的文本,用一副生动的图象替换。如果没有图像替换,那么网页就不可能这么美观、漂亮。《CSS禅意花园》中说:

图像替换技术非常强大且很快开始流行——若是没有它,我们甚至都无法建立禅意花园。该技术可以说是实现复杂、灵活CSS布局的一块最为重要基石。

由此可以见图像替换的重要。

也许你会说直接放一副图片或加上背景不行吗?为什么要写上文本有把文本隐藏呢?这不是多此一举吗?这样做确实能达到一样的视觉效果,但对搜索引擎是不利的。因为搜索引擎不能从这块地方的到任何内容,它就不知道这块地方要表达什么意思。而使用图像替换技术对搜索引擎就很友好。在引用《CSS禅意花园》中的一段:

图像替换技术使用display:none的本意并不只是想要替换文本,这样做还有一些更深层次的理由。实际上,若是没有任何提示或帮助,计算机就无法认出或读取图像中包含的文字。例如HTML中img元素,若是没有了alt属性,那么对于google等搜索引擎,以及辅助浏览设备(例如,屏幕阅读器即可阅读页面内容,并以声音的形式告诉浏览者)之类无法呈现图像的客户端来说,将变的豪无意义。而图像替换技术则保留了被替换元素中的原有文本,因此无论对任何客户而言,理解页面内容都不成问题。

直接使用图像或背景是传统表格布局使用的方法,而图像替换是CSS布局使用的方法。这又一次证明了CSS布局的网站更有优点。

《CSS禅意花园》中提了4种图像替换技术的方法,现在一一摘抄下来,和没有阅读此书的朋友分享:

1、Fahrner的方案

2、Leahy和Langridge的方案

3、Rundle的方案

4、Levin的方案

查看:493 评论:没有评论 标签:

相关日志

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved