我正在尝试实现三种不同的状态 ACTIVE、PRESSED、INACTIVE
图像文件（它们实际上是相同的高度：
我想做的是有三种不同的文本：CLINICIAN、NON CLINICIAN 和 BOTH
默认情况下，所有三个文本都将具有图像的顶部 1/3，悬停在图像的中间 1/3 并按下图像的底部 1/3。我还希望 CSS 根据文本调整图像大小，每边大约有 10 像素的填充。
我从这样的事情开始：
<html>
<head>
<style>
.hb {
background-image: url('l.png');
width: 120px;
height: 50px;
display: block;
text-indent: -9999px;
}
.hb:hover {
background-position: 0 50px;
}
.hb:active{
background-position: 0 -260px;
}
</style>
</head>
<body>
<span class="hb"><a href="/help/start">CLINICIAN</a></span>
</body>
</html>
但我确信我没有正确地做到这一点。