位置精灵形象

我曾经有被安置了作为背景的图片：位置精灵形象

#myIco{ 
    background:url(/i/myIco.gif) no-repeat center top; 
}

所以，当我把这个ID表格单元格，它会放置图标在小区的中间。

我决定将我所有的图标组合成一个精灵图像。

.sprites{ 
    background-image:url(/i/mySprites.png); 
    background-color: transparent; 
    background-repeat:no-repeat; 
    border:0; 
}

新图标的值是：

#axXh { 
    background-position: -33px -83px; 
    width: 33px; 
    height: 11px; 
}

但现在我的图标不再是表格单元格的中心。我如何解决它？

来源

2012-02-15 santa

线索：前使用“不重复顶部中央” – 2012-02-15 19:12:09

@Diodeus真实的，但现在我有背景位置：-33px -83px;我会在哪里添加中心顶部？ – santa 2012-02-15 19:21:01

我想你需要在那里嵌套一个DIV，并将BG放在DIV上，这样你可以剪切图像并定位它。 – 2012-02-15 19:35:37

这很棘手。您必须将图标封装在其自己的<span>或<div>中，然后将其水平放置在中心位置。我是精灵的忠实粉丝，并且激起你已经决定使用它们。

<style> 
    div { text-align: center; } /* or consider margin: 0 auto; */ 
    .sprites { 
    background-image: url('/i/mySprites.png'); 
    background-color: transparent; 
    background-repeat: no-repeat; 
    border:0; 
    } 
    .icon { 
    background-position: -33px -83px; 
    width: 33px; 
    height: 11px; 
    } 
</style> 

<div> 
    <span class="sprites icon"></span> 
</div>

来源

2012-02-15 20:41:29

位置精灵形象

回答

相关问题