图换文字效果：任意标签，均可插入图片

在写页面时，大多数人初级入门学习网页制作的人，在选择插入logo.png图片时，一般都会选择采用<img   src="" alt="">直接插入图片的形式，虽然那样可以达到一定效果，但是这里介绍一种其他的小技巧插入图片。

这里先写这样一句代码：

<div class="header">
<h1>我爱写页面</h1>
</div>

如果我们想要插入图片时，一般还会选择在h1标签样式中加入

background:url(images/logo.png)

如果我们不写文字的话，h2标签可能不会显示,但是如果我们写了文字，该如何去除文字呢？

h1{
width: 221px;
height: 68px;
background: url(images/logo.png) no-repeat;
line-height:400px;/*可以将文字清除*/
overflow:hidden;
}

参见以上代码，我们可以给文字行高设置无限大，再加上overflow:hidden,就可以去除文字，这种写法可能会存在一些问题，比如说在高度设置一定时，文字可能会偏移，那么我们该怎么办呢？

h1{
width: 221px;
height: 68px;
background: url(images/logo.png) no-repeat;
text-indent:-999em;/*文字缩进目的是清除文字*/
overflow:hidden;
}

参见以上代码仅仅是一行文字不一样，text-indent的目的是将文字无限缩进，这里没有高度限制。

效果如下：



总结:根据以上，在某些情况，我们不想通过img标签插入图片时，可以选择采用这种方法，优点是，任意标签均可插入图片O(∩_∩)O~~