css - 如何从图像 Sprite 中挤压部分背景图像

Question

我有这个 fiddle ，可以从图像 Sprite 生成单个国家/地区的国旗。我想挤压每个旗帜，因为旗帜的宽度似乎太宽了。

JSFiddle Demo

例如，挪威国旗在 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;
}

Answer 1

为了准确获得您想要的效果，我使用 background-size 只是为了减小 Sprite 的宽度。所以我将 Sprite 的宽度减少了大约六分之一，并相应地调整了元素的宽度。

#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