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

最新推荐文章于 2024-07-21 08:00:00 发布

黄小熊Sharon

最新推荐文章于 2024-07-21 08:00:00 发布

阅读量386

点赞数

分类专栏： HTML 文章标签：图换文字

本文链接：https://blog.csdn.net/baidu_36830673/article/details/75646356

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

 在写页面时，大多数人初级入门学习网页制作的人，在选择插入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; 
    }