一起CSS

当前位置:一起CSS

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

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

以下内容摘自《CSS禅意花园》一书,略有删减。

Levin Alexander想出了一个绝妙的注意:不再将文本置放于span中,而是将其从span中移出来,将文本和span一起放在父元素中,然后使用这个空白的span覆盖文本,并将背景图像应用到span之上。如果一切顺利的话,屏幕阅读器即可正常访问这段文本,切也充分考虑并解决了浏览器禁用图像后空白页面的可访问性问题了。但新的问题也随之出现,那就是图像不能是透明的,否则用户将会看到下面的文本。切这种方案所需要的CSS代码极为冗长,让人难以理解。

HTML代码:

<h3 class="replace" id="myh1">And a dash of Thyme.<span></span></h3>

CSS代码:

.replace{
position:relative;
margin:0;
padding:0;
}
.replace span{
display:block;
position:absolute;
top:0;
left:0;
z-index:1;
}
#myh1,#myh1 span{
height:25px;
width:300px;
background:url(thyme.png);
}

优点:屏幕阅读器可正常访问;解决浏览器禁用图片后空白页面的可访问性问题。

缺点:无法使用透明图像;CSS代码较为冗长。

浏览器支持:

Windows——IE 5.5及以上版本、Netscape 7、Opera 6及以上版本、FireFox;

苹果机——IE 5.2、Safari、FireFox。

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

查看:636 评论:2 标签:

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

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

以下内容摘自《CSS禅意花园》一书,略有删减。

设计师Mike Rundle提出了一中使用负text-indent属性值的方法,将文本推到屏幕的左边缘之外,代码简洁优雅。

HTML代码:

<h3 id="header">Apple pie with cheddar?!</h3>

CSS代码:

#header{
text-indent:-5000px;
background:url(sample-image.gif) no-repeat;
height:25px;
}

优点:屏幕阅读器可正常访问;没有多余的<span>;简洁优雅的CSS。

缺点:并没有解决浏览器禁用图像后空白页面的可访问性问题。

浏览器支持:

Windows——IE 5.5及以上版本、Netscape 7、Opera 6及以上版本、FireFox;

苹果机——IE 5.2、Safari、FireFox。

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

查看:566 评论:2

CSS图像替换技术之Leahy和Langridge的方案

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

以下内容摘自《CSS禅意花园》一书,略有删减。

Seamus Leahy和Stuart Langridge均独立地发现了这种方法。该方法让我们不必再添加那些多余的<span>标签,且在保证屏幕阅读器可以正常阅读文本的同时,也能在页面中隐藏元素中的内容。

HTML代码:

<h3 id="header">I like cola.</h3>

CSS代码:

#header{
padding:25px 0 0 0;
overflow:hidden;
background:url(cola.gif) no-repeat;
height:0;
}

优点:屏幕阅读器可正常访问,没有多余的<span>。

缺点:并没有解决浏览器禁用图象后空白页面的可访问性问题。

点击这里查看其他方案。

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

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布局的一块最为重要基石。

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

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

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的方案

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

分类

最新日志

最新评论

存档

链接

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

© Copyright 2010 一起CSS All Rights Reserved