使用CSS從sprite調整圖像

我有一個CSS sprite，其大小爲32x32px的各種圖標。使用CSS從sprite調整圖像

現在我需要的是顯示20x20px大小的圖標之一。我嘗試了一些東西，比如使用background-size：cover或者使用transform：scale（0.625）來設置大小爲20px，但我的努力沒有給出我想要的結果。

HTML我的測試：

32px icons: 

<div class="sprite" style="background-position:0px 32px;">&nbsp;</div> 
<div class="sprite" style="background-position:64px 32px;">&nbsp;</div> 
<div class="sprite" style="background-position:32px 96px;">&nbsp;</div> 
<div class="sprite" style="background-position:0px 0px;">&nbsp;</div> 
<div class="sprite" style="background-position:32px 64px;">&nbsp;</div> 

<hr> 
20px icons (attempts): 

<div class="sprite" style="background-position:32px 64px; width:20px; height:20px;">&nbsp;</div> 
<div class="sprite" style="background-position:32px 64px; width:20px; height:20px; background-size:cover;">&nbsp;</div> 
<div class="sprite" style="background-position:32px 64px; width:20px; height:20px; transform:scale(0.625);">&nbsp;</div>

CSS對我的測試：

.sprite { 
    background-image:url(http://buildnewgames.com/assets/article//dom-sprites/spritesheet.png); 
    width:32px; 
    height:32px; 
}

請看看這個小提琴，看看我的嘗試：

https://jsfiddle.net/dfqh0yrc/4/

來源

2016-12-15 pimeys

的可能的複製[我怎麼能擴展在CSS精靈的圖像（http://stackoverflow.com/questions/2430206/how-can-i-scale- an-image-in-a-css-sprite） – Punit

您只能使用scale沒有width和height像下面這樣：

.sprite { 
 
    background:url(http://buildnewgames.com/assets/article//dom-sprites/spritesheet.png); 
 
    width:32px; 
 
    height:32px; 
 
}

32px icons: 
 
<div class="sprite" style="background-position:0px 32px;">&nbsp;</div> 
 
<div class="sprite" style="background-position:64px 32px;">&nbsp;</div> 
 
<div class="sprite" style="background-position:32px 96px;">&nbsp;</div> 
 
<div class="sprite" style="background-position:0px 0px;">&nbsp;</div> 
 
<div class="sprite" style="background-position:32px 64px;">&nbsp;</div> 
 
<hr> 
 
20px icons (attempts): 
 
<div class="sprite" style="background-position:32px 64px; transform:scale(0.625);">&nbsp;</div> 
 
<div class="sprite" style="background-position:32px 64px; transform:scale(calc(20/32));">&nbsp;</div>

您還可以使用calc來計算像以下的比例因子：

<div class="sprite" style="background-position:32px 64px; transform:scale(calc(20/32));">&nbsp;</div>

演示上的jsfiddle：https://jsfiddle.net/dfqh0yrc/5/

來源

2016-12-15 07:02:35

這適用於調整32px到20px的大小！但是，當從24像素調整爲20像素時，我遇到了一個小問題，這恰好是0.8333333333333333的比例。它看起來像缺少一個像素，可能是由於四捨五入，使其看起來與佈局的其餘部分沒有對齊。有沒有辦法解決這個缺失的像素？ – pimeys

你可以提供一個圖像的網址與24像素精靈？嘗試計算方法'calc（20/24）' –

這裏有一個新的小提琴，有一個24像素的精靈。我試圖在圖像周圍製作綠色的'.s20'。如果它是一個20px的東西，它應該在中間完美對齊，不是嗎？ https://jsfiddle.net/dfqh0yrc/6/ – pimeys

嘗試使用背景大小 CSS。

示例：background-size：25％25％;

希望這可以解決您的問題。

來源

2016-12-15 07:01:58 Thamizhselvan

使用CSS從sprite調整圖像

回答

相關問題