css学习笔记(1)--替换
时间：2011-05-29 来源：denise28
字体总是有限的，因此有时候需要用图片来替换文本内容。
方法1：文本缩进
1: h1{
2:
3: background-image: url(image/1.gif);
4: background-repeat: no-repeat;
5: }
以上是直接的一个图片，放到h1上，我们可以通过添加
text-indent:-9999px;
就是把文本移到屏幕以外的地方。
注意：
也可以设置
overflow:hidden
因为h1 的自然高度对于图片还说可能太高。有些版本的浏览器，元素会自动进行扩展来适应其内容，所以可能出现h1比图片大很多的情况，设置overflow:hidden可以避免这种情况
方法2：
添加额外标记
1: <h1>
2: <span>Hello world!</span>
3: </h1>
h1内有额外的span元素，可以在它上面应用背景图来覆盖HTML文本，下面设置span的绝对位置来实现文本替换。
1: h1{
2: position:relative;
3: width: 389px;
4:
5: overflow: hidden;
6: }
7:
8: h1 span{
9: position: absolute;
10: left: 0;
11: top: 0;
12: width: 100%;
13:
14: background-image: url(image/1.gif);
15: background-repeat: no-repeat;
16: }
span设置成为绝对位置，对脱离文本流，h1文本自然就在span下面。
相关阅读 更多 +
