Question

我有一个问题，一旦我使用background-size属性，它似乎减少了背景的大小而不是增加它。

div.someelement{
    z-index: 100;
    position: fixed;
    background: url('spritesheet.png') no-repeat;
        background-size: 200% 200%;
        background-position: 0px 0px;
    width: 50px;
    height: 55px;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
}

我希望背景大小：200％200％，以使spritesheet的比例增加一倍。 spritesheet中的元素实际上是每110px 100px，我试图将其缩小到这个50x55的盒子。我做错了什么，我怎么能做到？

我也不关心IE8的兼容性。

Answer 1

可能你的图像大于100像素。

如果div是50px，并且你将bakcground大小设置为200％，则意味着50px的200％，因此你的背景将具有100px的大小。

如果图像的原始尺寸较大，那么您正在缩小它。没有两倍大。

Answer 2

如果框和图片具有相同的比例，请使用background-size:cover;或background-size:contain;

评论后更新

在背景大小中使用百分比值时，它基于应用元素的尺寸。因此，200%元素上的50px会使背景图片为100px。

在你的情况下，你最好使用实际像素，并且因为你想要背景是原始尺寸的一半，所以只需将其设置为

div.someelement{
    /*.. other properties ..*/
    background-size: 262px 225.5px;
    /*.. other properties ..*/
}

Answer 3

如果要以原始尺寸显示524x451尺寸的图像，则需要根据div的尺寸计算其尺寸/尺寸，在您的情况下，其尺寸为524/50 = 10.48（1048％）宽度。

然后，为了使100x110适合50x55大小的div，它必须是1048,524的一半（并且使用相同的数学高度将给你410）。

TrueClass

div {
  z-index: 100;
  position: fixed;
  background: url(https://i.stack.imgur.com/BdDOg.png) no-repeat;
  background-size: 524% 410%;
  background-position: -50px -50px;
  width: 50px;
  height: 55px;
  margin: auto;
  left: 0;
  top: 0;
  bottom: 0;
}

在CSS中缩放spritesheet

3 个答案: