一起CSS

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

CSS图像替换技术之Fahrner的方案

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

以下内容摘自《CSS禅意花园》一书。

2003年3月,Douglas Bowman在他的网站Stopdesign上发布了一个技巧(www.stopdesign.com/articles/replace_text),让设计师能够用一张背景图像替代某元素中的文字,以期显出更美观的字体。为了表示对发明者Todd Fahrner的尊重,这个技巧随后也被叫做“Fahrner图像替换(Fahrner Image Replacement,FIR)”。该技巧实现非常简单:用span将元素中的文本包围起来,然后通过应用CSS样式隐藏这个span中的文本,最后将背景图像应用到该元素之上即可。例如,对于下面的这一段HTML标记:

<h1 id="pageHeader"><span>css Zen Garden</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布局的一块最为重要基石。

点击这里查看其他图像替换方案。

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

相关日志

发表留言

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

提示: 您可以使用一些简单的标签: <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