概述

不论是对浏览者还是对搜索引擎，文字都是最佳的页面内容展示方式。
但是，由于字体等原因的限制，纯文字的展示渐渐无法满足现代网页的要求。
于是，出现了通过CSS来实现用图片替换文字的方法，这种方式既能实现页面上各种丰富的效果，又能满足搜索引擎优化的需要，而且也对屏幕阅读器友好。
本文将介绍实现图文替换技术的多种方法。

方法

正常情况（文字在图片上方）

www.laixiangran.cn

使用文本缩进 text-indent

www.laixiangran.cn

这里设置text-indent为100%，而没有设置一个很大的负text-indent，是因为后者在浏览器中会创建一个很大的盒子，这在一些很老旧的设备中可能会产生问题，而且性能也不好。

CSS：

                
                    .replace-text-indent {
                        width: 250px;
                        height: 250px;
                        background: url("../images/avatar.jpg");
                        text-indent: 100%;
                        white-space: nowrap;
                        overflow: hidden;
                    }
设置overflow为hidden可以隐藏文本，whitespace:nowrap可以阻止换行。

使用外边距 margin

www.laixiangran.cn

CSS：

                
                    .replace-margin {
                        width: 2250px;
                        height: 250px;
                        background: url("../images/avatar.jpg") top right no-repeat;
                        margin: 0 0 0 -2000px
                    }
这项技术利用一个很大的负左边距强制文本在浏览器窗口之外,然后给div一个相对大的宽度补偿外边距。记住，这种方法对于浏览器执行来说并不高效，因为浏览器不得不画一个非常大的盒子。

使用内边距 padding

www.laixiangran.cn

CSS：

                
                    .replace-padding {
                        width: 250px;
                        height: 0;
                        background: url("../images/avatar.jpg") top right no-repeat;
                        padding: 250px 0 0 0;
                        overflow: hidden;
                    }
这项技术是设置div的height为0，然后设置上内边距将文本推出div外面，再设置overflow: hidden进行隐藏。

使用color

www.laixiangran.cn

CSS：

                
                    .replace-color {
                        width: 250px;
                        height: 0;
                        background: url("../images/avatar.jpg") top right no-repeat;
                        color: rgba(0, 0, 0, 0);
                    }
这项技术是将字体的颜色设置为透明。

技术之旅