第一种方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
display: inline-block;
text-decoration: none;
color: #424242;
width: 190px;
height: 90px;
border: 1px solid black;
background-image: url(01.jpg);
background-size: 190px 90px;
text-indent: 200px;
white-space: nowrap;
overflow: hidden;
}
</style>
<title></title>
</head>
<body>
<a href="http://www.taobao.com" target="_blank">淘宝网</a>
</body>
</html>
当网速好的时候,会显示图片链接,
当网速不好的时候(也就是当你把css代码注释时)会显示图片链接, 。
第二种方法:
盒子有三部分,边框,内边距,内容区,如果我给盒子加个背景颜色的话,除了内容区变色之外,padding部分也会变色,那,我也可以给padding加图片啊。有了这一点,我让高度等于0,容器会变成一条线,再加一条padding-top: 90px;,padding会把容器撑开,不过文字上不去了
然后再加上overflow: hidden;,也就完事了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
display: inline-block;
text-decoration: none;
color: #424242;
width: 190px;
height: 0px;
padding-top: 90px;
overflow: hidden;
border: 1px solid black;
background-image: url(01.jpg);
background-size: 190px 90px;
/* text-indent: 200px;
white-space: nowrap;
overflow: hidden; */
}
</style>
<title></title>
</head>
<body>
<a href="http://www.taobao.com" target="_blank">淘宝网</a>
</body>
</html>
你看淘宝网也是用padding-top实现的,如果你把overflow: hidden;去掉,就会出现淘宝网。如下: