CSS技巧：text-indent隐藏文字(以图换字)
发布时间：2013-06-11 01:01:34作者：知识屋
以图换字是CSS布局中非常常用的一种手段，因为图片文字有时候比可选的文字的表达效果更好！
因此，某些文字标题是用图片来表达的。但写一个img标签实在不雅，为了照顾蜘蛛，我们使用浏览器障眼法。
于是用最常用的text-indent：
css：
示例代码
h4 a{background：url（http：//www.w3cbbs.com/images/w3cbbs/logow3cbbs.png） left top no-repeat；width：300px；height：75px；text-indent：300px； white-space：nowrap； overflow：hidden；}
Xhtml：
示例代码
<h4><a href=＂#＂>css网页布局w3c标准</a></h4>
但你会发现，在IE6中，没有得到期望的效果，背景图片和文字都被隐藏了（IE7也是这样，其它的未做测试）。
解决办法至少有两个：
示例代码
1： 将display：inline-block；改为display：block；
2：去掉display：inline-block；属性，加float：left；属性。
最终结果：
代码调试框
<！DOCTYPE html PUBLIC ＂-//W3C//DTD XHTML 1.0 Transitional//EN＂ ＂http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd＂>
<html xmlns=＂http：//www.w3.org/1999/xhtml＂>
<head>
<meta http-equiv=＂Content-Type＂ content=＂text/html； charset=utf-8＂ />
<title>DIVCSS实例：text-indent隐藏文字（以图换字） - mb5u.com</title>
<style type=＂text/css＂>
h4 a{display：block； background：url（http：//www.w3cbbs.com/images/w3cbbs/logow3cbbs.png） left top no-repeat；width：300px；height：75px；text-indent：300px； white-space：nowrap； overflow：hidden；}
</style>
</head>
<body>
<h4><a href=＂http：//www.w3cbbs.com/＂>css网页布局w3c标准</a></h4>
</body>
</html>
（免责声明：文章内容如涉及作品内容、版权和其它问题，请及时与我们联系，我们将在第一时间删除内容，文章内容仅供参考）
知识阅读
软件推荐
更多 >
-
1
英文强制换行css 使用css强制英文单词断行代码2013-02-18
-
2
CSS中marker-offset的使用方法
-
3
IE6-8 filter双重滤镜bug的相关详解！
-
4
css3中如何让多余的字符串消失并附加省略号的方法
-
5
CSS实现段落首行缩进的代码
-
6
CSS中使用expression完美设置页面最小宽度(兼容ie)
-
7
[前端笔记] border:none;与border:0;的区别
-
8
用css实现透视效果
-
9
css教程之绝对定位使用详解
-
10
CSS实现背景图片不规则的导航菜单
