㈠方法一:利用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
时间: 2024-10-18 16:04:28