专注优质Wordpress企业网站搭建与优化

柳影花阴：CSS图像替换文本技术（下）



CSS图像替换文本技术

6.改进的Phark方法

  1. <style>
  2. #header {
  3. text-indent: -5000px;
  4. background: url(/attachments/month_0803/sample-opaque.gif);
  5. height: 25px;
  6. }
  7. </style>
  8. <h3 id="header">
  9. Revised Image Replacement
  10. </h3>

改进的Phark方法在一定程度上有了完善，不足仍然是在“图像关闭/CSS开启”情况下无效。

7.Dwyer方法

  1. <style>
  2. #header {
  3. width: 329px;
  4. height: 25px;
  5. background-image: url(attachments/month_0803/sample-opaque.gif);
  6. }
  7. #header span {
  8. display: block;
  9. width: 0;
  10. height: 0;
  11. overflow: hidden;
  12. }
  13. </style>
  14. <h3 id="header">
  15. <span>Revised Image Replacement</span>
  16. </h3>

Dwyer的方法是基于Classic FIR的改进，似乎能在所有的平台中正常运作，包括屏幕阅读器；

不足：“图像关闭/CSS开启”的情况下无效，而且需要一个额外的span。

8.Gilder/Levin方法

  1. <style>
  2. #header {
  3. width: 329px;
  4. height: 25px;
  5. position: relative;
  6. }
  7. #header span {
  8. background: url(attachments/month_0803/sample-opaque.gif) no-repeat;
  9. position: absolute;
  10. width: 100%;
  11. height: 100%;
  12. }
  13. </style>
  14. <h3 id="header">
  15. <span></span>Revised Image Replacement
  16. </h3>

Gilder/Levin提出的方法理论上解决了平台可访问性问题，而且即使在“图像关闭/CSS开启”的情况下也能让文本显示出来。

不足：需要一组额外的无内容span标签，而且背景图片的透明区域无法隐藏文本，大家可以运行下列代码观察：

  1. <style>
  2. #header {
  3. width: 329px;
  4. height: 25px;
  5. position: relative;
  6. }
  7. #header span {
  8. background: url(attachments/month_0803/sample-opaquet.gif) no-repeat;
  9. position: absolute;
  10. width: 100%;
  11. height: 100%;
  12. }
  13. </style>
  14. <h3 id="header">
  15. <span></span>Revised Image Replacement
  16. </h3>

9.推荐的带悬停提示方法

不管你使用的是上列何种方法，都放弃了直观的鼠标悬停提示效果。事实上我们并不一定要依赖于alt，这个缺陷我们可以利用title属性来进行完善：

  1. <style>
  2. #header {
  3. width: 329px;
  4. height: 25px;
  5. position: relative;
  6. }
  7. #header span {
  8. background: url(attachments/month_0803/sample-opaque.gif) no-repeat;
  9. position: absolute;
  10. width: 100%;
  11. height: 100%;
  12. }
  13. </style>
  14. <h3 id="header" title="汇聚博客资源,点亮博客价值 - 西米CC(http://ximicc.com)">
  15. <span></span>Revised Image Replacement
  16. </h3>

[ 以下内容您也可能感兴趣 ]

Categories: DIV+CSS重构标准

Tags: ,

Subscribe to Comments

Add a Comment