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在闭合浮动（清除浮动）上也大显身手