方法一：利用text-indent将文字移出盒子，然后让换行文字不换行，这样，当css无法加载时，虽然背景图无法显示，但是文字也不会被移出盒子，这样文字显示在用户的视野里了
代码：
<!DOCTYPE html><html><head><title>图片替代文本</title><style type="text/css">div{width: 213px;height: 73px;background: url(imgs/TB1YZkPLpXXXXbzXXXXXXXXXXXX-213-57.png) no-repeat;/*让文字超出容器*/text-indent: 100em;/****禁止文字换行****/white-space: nowrap;}</style></head><body><a href="#"><div>淘宝</div></a></body></html>
css可以加载出来时的效果图：
css无法加载出来时的效果图：
方法二：利用盒子的padding特性：可以显示背景图，但是不能显示内容
步骤：把盒子的高写成0，padding-top写成盒子背景需要的高度来显示背景，这样文字就显示在盒子外面了，再用overflow:hidden隐藏掉文字
代码：
<!DOCTYPE html><html><head><title>图片替代文本</title><style type="text/css">div{background: url(imgs/TB1YZkPLpXXXXbzXXXXXXXXXXXX-213-57.png) no-repeat;width: 213px;/**盒子的高设为0**/height: 0px;/**利用padding显示背景图**/padding-top: 73px;/**隐藏盒子外的文本**/overflow: hidden;}</style></head><body><a href="#"><div>淘宝</div></a></body></html>
效果图同方法一。
