如何將基於百分比的定位應用於純CSS的背景圖像精靈？

我有一個帶按鈕圖標的SVG精靈。圖標作爲背景圖像添加到HTML鏈接元素。如何將基於百分比的定位應用於純CSS的背景圖像精靈？

我想使用百分比來定位精靈，但它很混亂。使用基於像素的定位，很容易確定位置。不幸的是，使用百分比時會發生以下情況：

0％水平將精靈的左側對齊按鈕的左側。
100％的水平偏移將精靈的右側對齊按鈕的右側。

給定一個包含8個圖標的精靈，在按鈕中顯示第4個和第5個圖標之間的間距時，應用50％作爲偏移量。

什麼是正確的方式去這裏？

2013-12-08 kslstn

精靈的寬度取決於精靈圖標（圖像）的數量：一個圖標應該（通常）是它必須覆蓋的按鈕寬度的100％。因此，對於8個圖標：

background-position: 800%;

用於圖標I的偏移量（第一中：i = 1，第二i = 2，等等）用的總數量的圖標n被計算如下：

在偏移％=（i-1/n-1）* 100％

因此，對於精靈第一行中的第5個圖標8，偏移=（5-1/8-1）* 100％= 57,142％

background-position: 57.142 top;

SASS mixin：

@mixin background-position($number: 1){ 
    $total: 8; /* The number of icons in the sprite, placed next to one another */ 
    background-size: percentage($total); /* Results in 800% for 8 icons */ 
     background-position: percentage(($number - 1)/($total - 1)) top; /* My sprite has the default state in the top row, :active states in the bottom */ 
}

使用像SASS這樣的預處理器可讓您靈活地在以後的階段將圖標添加到精靈，而無需更改以前計算的所有背景位置。

當然這個解決方案適用於任何帶背景圖像的元素，而不僅僅是按鈕。

來源

2013-12-08 16:37:39 kslstn

我發現這個鏈接非常有用，瞭解背景位置如何使用百分比工作。 http://blog.vjeux.com/2012/image/css-understanding-percentage-background-position.html

我認爲將它和精靈一起使用是相當可觀的。但是按照建議使用SASS/LESS可以節省很多工作。

來源

2013-12-08 19:11:08

如何將基於百分比的定位應用於純CSS的背景圖像精靈？

回答

相關問題