㈠方法一：利用span元素
举例：在设置网页头部的logo时，点击图片会自动跳转到一个页面，这是利用了超链接加背景图片做到的
但是，仔细观看就会发现没有超链接的文字部分，被隐藏了，这是如何做到的呢？
方法：我们可以采用在超链接中加入一个span元素，设置span的样式，display：none；进行隐藏。
代码如下：
<!--html代码部分-->
<header class="header">
<div class="logo left">
<h1>
<a href="">
<span>豆瓣</span>
</a>
</h1>
</div>
</header>
<!--css代码部分-->
.header .logo a span{
display:none;
}
效果图：
㈡方法二：设置超链接的样式
⑴首先：把超链接的高度设置为0；
⑵接着：把内边距：padding-top设置为logo背景图片的高度（把文字挤下去了）
★解释：当我们审查元素时，会看到，超链接只有padding（内边距），同时因为背景图是覆盖边框的，在padding部分仍然可以看到背景，但是高度为0，也就是它的内容区域为0，这样一设置padding的值，文字就被挤下去了。
⑶最后：溢出隐藏，把挤下来的文字隐藏，设置：overflow：hidden
代码如下：
.header .logo a{
width: 154px;
height: 0px;
overflow: hidden;
padding-top: 30px;
display:block;
background: url("img/logo_db.png") no-repeat ;
}
效果图：
原文：https://www.cnblogs.com/shihaiying/p/12302096.html