超链接文字隐藏

shihaiying 2021-09-07 原文

㈠方法一：利用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 ;
 }