css图片替换文字

含义： 图像替代，就是像我们在平时将文本添加到文本中，然后通过css隐藏文本在它的位置上显示一个背景图片，这样，搜索引擎仍然可以搜到HTML文本，即使我们禁用css后，文本时仍然是可以显示的。

引用《精通css》中的一段解释：

HTML文本由很多的优点。文本可以被搜索引擎读取，开发人员可以对其进行复制和粘贴，并且在浏览器中改变字体大小后，它也会改变。因此很多设计人员都想尽量的采用HTML文本而不是文本的图像，但是遗憾的是，页面设计人员对于文本有有限的选择，尽管可以通过css来控制版面但是有很多字体的效果是无法实现的，所以在某些情况下还是需要用文本的图像的。 图像替代，就是像我们在平时将文本添加到文本中，然后通过css隐藏文本在它的位置上显示一个背景图片，这样，搜索引擎仍然可以搜到HTML文本，即使我们禁用css后，文本时仍然是可以显示的。

引用《CSS禅意花园》中的一段解释：

图像替换技术使用display:none的本意并不只是想要替换文本，这样做还有一些更深层次的理由。实际上，若是没有任何提示或帮助，计算机就无法认出或读取图像中包含的文字。例如HTML中img元素，若是没有了alt属性，那么对于google等搜索引擎，以及辅助浏览设备（例如，屏幕阅读器即可阅读页面内容，并以声音的形式告诉浏览者）之类无法呈现图像的客户端来说，将变的豪无意义。而图像替换技术则保留了被替换元素中的原有文本，因此无论对任何客户而言，理解页面内容都不成问题。

为什么要替换？

1. 网速不好的时候，图片显示不出，给读者提示。

2. web内容无障碍，使屏幕阅读器可理解。

 

有哪些方法？

1. display:none

缺点：大量使用容易被搜索引擎认为作弊。屏幕阅读器读不到。图片未加载不能显示。许多流行的屏幕阅读器会忽略那些display：none和visibility：hidden的元素，因为会完全忽略这个文本，造成严重的访问问题。

 

2. margin负值

 

 缺点；容易对布局造成影响，不适合模块化。图片不加载不能显示文字，屏幕阅读器能够读到

 

3. text-indent:

 

这个方法很好的解决了屏幕阅读器的问题，但是在关闭图像仍然打开css的情况下是无效的，虽然这种情况比较小，在网速访问非常慢的情况下或者访问者能够打开图像但是设置不打开，这些情况下一些人是看不到被替换的文本的。

缺点：屏幕阅读器可读，图片未加载不能显示，firefox下焦点框扩大，需添加overflow：hidden。同时text-indent尽量用于block元素。

 

4. font：0/0 a;

缺点：方法不错，唯独ie6显示一个小点。可以通过其他方法兼容ie6

 

5：css clip属性裁剪

 缺点：用好clip，事半功倍，只是hack较多，css代码较多。

 

6： 又见overflow

 

 缺点：Apple的voice Over无法独处高度为0的元素中的字。图片未加载不能显示，屏幕阅读器能读出。

 

7：line-height 3倍于height

缺点：屏幕阅读器可读，图片未加载不能显示。

 

 8. content url + display:inline-block;

缺点：屏幕阅读器可读，图片未加载能显示，此方法强强联合，精益求精，同时还支持透明图片和设置背景颜色。

 

 9. 合体

 缺点：屏幕阅读器可读，图片未加载可现实，兼容ie，透明图片，设置背景色。支持定宽，支持sprite。

 

 

trips：content 生成内容特别适合做一些装饰性的布局，因为content就是为此而生的，很多小图标的定位我们完全可以抛弃空标签了，还有强大的 CSS3 content：attr() 我们拭目以待。

content在闭合浮动（清除浮动）上也大显身手