位置精靈形象

我曾經有被安置了作爲背景的圖片：位置精靈形象

#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

位置精靈形象

回答

相關問題