css学习笔记(1)--替换

字体总是有限的，因此有时候需要用图片来替换文本内容。

方法1：文本缩进

h1{
    height: 43px;

   3: background-image: url(image/1.gif);

    background-repeat: no-repeat;
}

以上是直接的一个图片，放到h1上，我们可以通过添加

text-indent:-9999px;

就是把文本移到屏幕以外的地方。

注意：

也可以设置

overflow:hidden

因为h1 的自然高度对于图片还说可能太高。有些版本的浏览器，元素会自动进行扩展来适应其内容，所以可能出现h1比图片大很多的情况，设置overflow:hidden可以避免这种情况

 

方法2：

添加额外标记

<h1>
    <span>Hello world!</span>
</h1>

h1内有额外的span元素，可以在它上面应用背景图来覆盖HTML文本，下面设置span的绝对位置来实现文本替换。

h1{
    position:relative;
    width: 389px;
    height: 43px;
    overflow: hidden;
}

h1 span{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(image/1.gif);
    background-repeat: no-repeat;
}

span设置成为绝对位置，对脱离文本流，h1文本自然就在span下面。