<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*-------------------------------方法一：-利用行高------------------------------------------*/
h1{
200px;/*设置logo图片的宽度*/
height:100px;/*设置logo图片的高度*/
background-image: url("taobao.jpg");/*logo图片的地址*/
background-size: 100% 100%;/*让logo全部显示*/
overflow: hidden;/*让超出图片的部分隐藏*/
}
h1 a{
display: block;
line-height: 260px;/*设置a标签的行高大于logo的高度2倍*/
}
/*-----------------------------方法二：利用首行缩进---------------------------------------------*/
h2{
200px;/*设置logo图片的宽度*/
height:100px;/*设置logo图片的高度*/
background-image: url("taobao.jpg");/*logo图片的地址*/
background-size: 100% 100%;/*让logo全部显示*/
text-indent: -1000px;/*设置缩进为负数让文字消失*/
}
h2 a{
display: block;
}
/*-----------------------------方法三：利用定位---------------------------------------------*/
h3{
font-size: 10px;
position: relative;
}
h3 span{
200px;/*设置logo图片的宽度*/
height: 100px;/*设置logo图片的高度*/
background-image: url("taobao.jpg");/*logo图片的地址*/
background-size: 100% 100%;/*让logo全部显示*/
position: absolute;/*设置logo图片的位置*/
left: 0;
top: 0;
}
</style>
</head>
<body>
<p>
---------方法一：-利用行高---------
</p>
<h1>
<a href="http://www.taobao.com">淘宝网</a>
</h1>
<p>
--------方法二：利用首行缩进--------
</p>
<h2>
<a href="http://www.taobao.com">淘宝网</a>
<a href="http://www.taobao.com">淘宝网</a>
<a href="http://www.taobao.com">淘宝网</a>
<!--三行超链接是为了让超链接的总高度大于logo图片高度,这样才能使得点击图片所有地方都能有超链接-->
</h2>
<p>
--------方法三：利用定位---------
</p>
<a href="http://www.taobao.com">
<h3>
<span></span>
<!--给span标签设置宽高，插入logo图片将‘淘宝网’遮盖住。（此方法不适用于背景透明的png图片）-->
淘宝网
</h3>
</a>
</body>
</html>