一起CSS

当前位置:一起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。

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

查看:637 评论:2 标签:

相关日志

共有 2 条评论

  • baljeans 说:

    这个方法是好 不过有链接的话 就不能用这个方法了

    • 青色 说:

      可以的,写成
      <h3 class="replace" id="myh1"><a href="#">And a dash of Thyme.<span></span></a></h3>或
      <h3 class="replace" id="myh1">And a dash of Thyme.<span></span><a href="#"></a></h3>
      都可以,只是写成
      <h3 class="replace" id="myh1"><a href="#">And a dash of Thyme.<span></span></a></h3>
      在 IE 浏览器里鼠标移上去不会显示手型,但点击还是没有问题的,仍然能进入相应的链接。

发表留言

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

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