如何從圖像精靈中擠壓部分背景圖像

我有這個提琴從圖像精靈中生成單個國家的標誌。我想擠壓每個國旗，因爲國旗的寬度似乎太寬了。如何從圖像精靈中擠壓部分背景圖像

例如挪威國旗太寬的jsfiddle樣本。

我該怎麼做？謝謝。

#flag1 { 
    width: 120px; 
    height: 60px; 
    background-image: url(http://i.hizliresim.com/e7Y5dm.png); 
    background-position: -120px 0; 
} 

#flag2 { 
    width: 120px; 
    height: 60px; 
    background-image: url(http://i.hizliresim.com/e7Y5dm.png); 
    background-position: -480px 13800px; 
} 

#flag3 { 
    width: 120px; 
    height: 60px; 
    background-image: url(http://i.hizliresim.com/e7Y5dm.png); 
    background-position: -1200px 19020px; 
}

來源

2014-01-18 user3187757

一種解決方案是scale (transform:scale(x);)整個元件（在這種情況下的div）
例如transform:scale(0.5);將縮放元件至其一半的大小，但要記住，它保留在初始空間DOM流。

另一種方法是使用background-size property調整圖片的大小，但你必須重新計算定位以及..

演示在http://jsfiddle.net/JA97b/5/

此外，在你的CSS中，你應該將公共屬性分組到一個類中，然後應用該屬性，而不是爲每個標誌重複使用tem。

.flag{ 
    width: 120px; 
    height: 60px; 
    background-image: url(http://i.hizliresim.com/e7Y5dm.png); 
} 
#flag1{background-position: -120px 0;} 
#flag2{background-position: -480px 13800px;} 
#flag3{background-position: -1200px 19020px;}

，並使用

<div class="flag" id="flag1"></div> 
<div class="flag" id="flag2"></div> 
<div class="flag" id="flag3"></div>

來源

2014-01-18 10:39:23

爲了得到你想要什麼我使用的背景大小隻是減少你的精靈的寬度。所以我減少了大約六分之一的精靈的寬度和調整元素的寬度一致。

#flag3 
{ 
    width: 100px; 
    height: 60px; 
    background: url(http://i.hizliresim.com/e7Y5dm.png) 0 0 no-repeat; 
    background-position: -1000px -480px; 
    background-size: 1500px 780px; 
}

Demo

來源

2014-01-18 11:03:26 MichaB

如何從圖像精靈中擠壓部分背景圖像

回答

相關問題