案例注意事项:
1.注意背景图片不需要用img实现,因为img标签中的title是鼠标悬停在图片上的时候显示的内容。
实现效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bkmaci{
width: 50px;
background-image:url(https://t7.baidu.com/it/u=1092574912,855301095&fm=193&f=GIF) ;
}
.rehuo{
background-size: auto;
background-image:url(https://t7.baidu.com/it/u=1620952818,4218424235&fm=193&f=GIF);
}
</style>
</head>
<body>
<table border="5px" align="center" cellspacing="2px" cellpadding="8px">
<tr align="center">
<td width="100px">球队</td>
<td width="100px">球员</td>
<td width="100px">夺冠次数</td>
</tr>
<tr align="center" bgcolor="lightgray">
<td rowspan="3" class="bkmaci">马刺队</td>
<td>邓肯</td>
<td rowspan="3">5次</td>
</tr>
<tr align="center" bgcolor="lightgray">
<td>帕克</td>
</tr>
<tr align="center" bgcolor="lightgray">
<td>吉诺比利</td>
</tr>
<tr align="center" bgcolor="lightpink">
<td rowspan="3" class="rehuo">烈火队</td>
<td>詹姆斯</td>
<td rowspan="3" >3次</td>
</tr>
<tr align="center" bgcolor="lightpink">
<td>韦德</td>
</tr>
<tr align="center" bgcolor="lightpink">
<td>波什</td>
</tr>
<tr>
<td colspan="3">比赛解说:黄健翔、姚明</td>
</tr>
</table>
</body>
</html>