我有以下HTML:
<ul style="float: right; margin-left: 5px;" id="status-infos">
<li><a id="A"class="button sprite-arrow-circle" ></a></li>
<li>
<a id = "B" class="button">
<img width="16" height="16" src="/Images/control-180.png">
</a>
</li>
</ul>
CSS:
.sprite-arrow-circle{ background-position: 0 0; width: 16px; height: 16px; }
.button { display: inline-block; }
.button, .form legend, .legend, .mini-menu {
border: 1px solid white;
border-radius: 0.417em 0.417em 0.417em 0.417em;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
font-weight: normal;
line-height: 1.333em;
outline: 0 none;
padding: 0.167em 0.5em 0.25em;
text-decoration: none;
text-shadow: none;
}
a.button {
background-color: transparent;
background-image: url(/Images/sprite.png);
background-position: 0 -396px;
background-repeat: no-repeat;
height: 16px;
width: 16px;
}
id = A链接上面没有空格,下面有一个大空格。
id = B链接在中心垂直间隔,上方和下方有空格。这看起来很完美。
任何人都可以解释可能发生的事情。似乎只与图像的链接垂直间隔开 正确的方法。
答案 0 :(得分:0)
你必须使用CSS3的background-size
属性来实现background-image
的缩放,CSS2只是剪辑背景,这就是精灵的工作方式。