网站logo,一般放在h1标签里,背景图片为Logo, 但是考虑到seo,网站名称也要写上的,但是网站logo一般只有一个图片,文字部分是不会被显示的,今天我们来看看怎么做吧!
方法一:
首先写好HTML结构:
html部分:
<h1>
<a href="https://blog.csdn.net" alt="CSDN Logo" title="CSDN首页">
CSDN
</a>
</h1>
然后为a标签设置背景图:
CSS部分:
a {
display: inline-block;
width: 90px;
height: 44px;
background: url(https://csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1) no-repeat left top/94px 44px;
text-indent: 90px;
overflow: hidden;
}
设置a标签首行缩进的数值与图片宽度数值一致,然后文字会被挤出去,再对文字设置溢出隐藏即可!
方法二:
HTML的代码不变:
html部分:
<h1>
<a href="https://blog.csdn.net" alt="CSDN Logo" title="CSDN首页">
CSDN
</a>
</h1>
对a标签的高度设置为0,然后设margin-top的高度为图片高度,这样margin-top会高度撑满盒子,把文字挤出去,然后溢出隐藏即可!
css部分:
a {
display: inline-block;
width: 90px;
height: 0px;
background: url(https://csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1) no-repeat left top/94px 44px;
padding-top: 44px;
overflow: hidden;
}
以上两种方法都可实现哦!当然方法有多种,可以再去尝试其他哦!