Sprite无法正确定位

Question

首先，我一直在努力研究这种方式，长久以来:)主要使用教程来尝试让它工作，厌倦寻找答案，但没有任何工作。我制作了一个带有链接的精灵，它工作正常，但它像我想的那样垂直而不是水平。任何帮助将是惊人的！

CSS

.sprite {background:url(/air-head.jpg);no-repeat;margin-left:auto} 

    .images {height:68px;} 

      .hpa {width:150px; background-position:-2px -2px;display:inline;} 
      .co2 {width:150px; background-position:-153px -2px;display:inline;} 
      .cover {width:150px; background-position:-304px -2px;display:inline;} 
      .reg {width:150px; background-position:-455px -2px;display:inline;} 
      .asa {width:150px; background-position:-606px -2px;display:inline;} 
      .parts {width:150px; background-position:-757px -2px;display:inline;} 

HTML

<a href="paintball-compressed-air-tanks.html"><img src="/transparent.gif" class="sprite images hpa" alt="Compressed Air Tanks" /></a> 
<a href="co2-paintball-tanks.html"><img src="/transparent.gif" class="sprite images co2" alt="Co2 Tanks" /></a> 
<a href="paintball-tank-covers-butts.html"><img src="/transparent.gif" class="sprite images cover" alt="Tank" /></a> 
<a href="paintball-regulators.html"><img src="/transparent.gif" class="sprite images reg" alt="Paintball Regulators" /></a> 
<a href="paintball-tank-accessories.html"><img src="/transparent.gif" class="sprite images asa" alt="Air Accessories" /></a> 
<a href="paintball-air-service-parts.html"><img src="/transparent.gif" class="sprite images parts" alt="air system parts" /></a> 

Answer 1

背景位置被定义为background-position: [vertical offset], [horizontal offset];。因此只是反转偏移：

.hpa {width:150px; background-position:-2px -2px;display:inline;} 
.co2 {width:150px; background-position:-2px -153px;display:inline;} 
.cover {width:150px; background-position:-2px -304px;display:inline;} 
.reg {width:150px; background-position:-2px -455px;display:inline;} 
.asa {width:150px; background-position:-2px -606px;display:inline;} 
.parts {width:150px; background-position:-2px -757px;display:inline;} 

Answer 2

您可以通过使用http://www.spritecow.com/检查background-image和css。它会帮助你在sprite