图像替换技术的最佳实战

HTML文本的优点就是非常有利于SEO和页面设计人员的处理与控制。同时,可访问性(Accessibility)的思想也应该重点考虑一下。然而,在某些情况不得不使用文本的图像,就像淘宝商城中每个模块的标题,出于品牌策略的要求,需要使用特殊的字体,就应用了图像替换方法。
虽然我们提倡尽可能的使用HTML文本而不使用文本的图像,但是由于字体选择的有限,浏览器对CSS3的支持情况也有限,为了达到某些特殊的视觉效果,为了树立品牌,图像替换技术是一个好的选择。

什么是图像替换技术

你可以像平常一样将文本添加到文档中,然后使用CSS隐藏文本并在它的位置上显示一个背景图片。

这样的话,搜索引擎仍然可以搜索HTML文本,而且如果禁用CSS,文本仍然会显示。

image-replacement,图片替换

 

案例演示

我们的选择

看了这个概念,我们马上就会想到一些比较流行的图片替换技术。如果我们抛开浏览器不谈,考虑到其它显示终端的话,有些图片替换技术是不可行的。

接下来,我们就看一下各种各样图片替换技术。

display:none

1
2
3
4
h3{background:url(title_bg.png) no-repeat 0 0;height:20px;}
h3 span{
    display:none;
}

visibility:hidden

1
2
3
4
h3{background:url(title_bg.png) no-repeat 0 0;height:20px;}
h3 span{
	visibility:hidden;
}

position:absolute;

1
2
3
4
5
6
h3{background:url(title_bg.png) no-repeat 0 0;height:20px;}
h3 span{
    position:absolute;
    left: -9999px;
    top: -9999px;
}

overflow:hidden;

1
2
3
4
5
6
h3{background:url(title_bg.png) no-repeat 0 0;height:20px;}
h3 span{
    display:block;
    height:0px;
    overflow:hidden;
}

text-indent:-9999px;

1
2
3
4
h3{background:url(title_bg.png) no-repeat 0 0;height:20px;}
h3{
  text-indent:-9999px;
}

line-height

1
2
3
4
5
6
7
h3{background-position:0 -143px;}
h3 span{
    height:20px; 
    overflow:hidden;
    line-height: 60px;/*行高最好设3倍或以上*/
    display:block;
}

空白元素遮盖法

1
2
h3{position:relative;overflow:hidden;/*display:block; 行内元素需要 */}
h3 span{background:url(T174BJXbhoXXXXXXXX-148-513.png) no-repeat 0 -171px;position:absolute;height:100%;width:100%;}

最佳实战,就是它

1
2
 
.screen-reader-text{position:absolute;left: -9999px;top: -9999px}

可访问性强,良好的用户体验

1
2
3
//空白元素遮盖法,图片没有加载完,我们还可以看到东西。
h3{position:relative;overflow:hidden;/*display:block; 行内元素需要 */}
h3 span{background:url(T174BJXbhoXXXXXXXX-148-513.png) no-repeat 0 -171px;position:absolute;height:100%;width:100%;}

 

案例演示

推荐文章: { hide_text } CSS文字隐藏总结报告

站点统计