Question

我有这个小提琴，它从图像精灵生成单个国家标志。我想挤压每个标志，因为标志的宽度似乎太宽。

例如挪威国旗在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来减少精灵的宽度。因此，我将精灵的宽度减少了大约六分之一，并根据要求调整了元素的宽度。

#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

Answer 2

一个解决方案是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>

如何从图像精灵中挤出部分背景图像

2 个答案: