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