a标签里面不能套用a标签
1.背景图片加链接，图片和框需要设置一样的宽高
<a href="
http://www.baidu.com" target="_black"></a>
a{
display: inline-block; /*行内元素设置成块级元素才能设置宽高*/
width: 100px;
height:50px;
color:#424242; /*a标签默认的是蓝色，把标签的颜色该为黑色*/
text-decoration: none; /*去掉下划线*/
border:1px solid black;
background-image: url("
https://upd13.sogoucdn.com/nstatic/img/logo.png?v=4");
background-size:100px 50px;
}
2.有网时和无网时显示的页面
第一种方法
<a href="
http://www.baidu.com" target="_blank">百度</a>
a{
display: inline-block; /*行内元素设置成块级元素才能设置宽高*/
width: 100px;
height:50px;
color:#424242; /*a标签默认的是蓝色，把标签的颜色该为黑色*/
text-decoration: none; /*去掉下划线*/
border:1px solid black;
background-image: url("
https://upd13.sogoucdn.com/nstatic/img/logo.png?v=4");
background-size:100px 50px;
/* 在无网状态下不会加载css，只会标签里的链接 ，有网时加载了css，用户也看不到*/
text-indent: 200px; /*首行缩进*/
white-space: nowrap; /*不换行*/
overflow: hidden; /*文字设在边框外面，溢出隐藏*/
}
第二种方法：使用内边距padding-top撑开高度
<a href="
http://www.baidu.com" target="_blank">百度</a>
a{
display: inline-block; /*行内元素设置成块级元素才能设置宽高*/
width: 100px;
height:0px;
padding-top:50px;
overflow: hidden;
color:#424242; /*a标签默认的是蓝色，把标签的颜色该为黑色*/
text-decoration: none; /*去掉下划线*/
border:1px solid black;
background-image: url("
https://upd13.sogoucdn.com/nstatic/img/logo.png?v=4");
background-size:100px 50px;
}
使用第二种方法解决时，容器的高度为0时，它会在顶部成为一条线，可以使用在元素里加内边距撑开，不会影响标签里的字（图1），再使用hidden隐藏掉文字
图（1）
图（2）