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

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

中编写正确的sprite张图片

Answer 2

background-position定义为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;}

精灵没有正确定位

2 个答案: