css-如何使用图像的一部分作为背景

Question

我正在尝试将图像的一部分用作div的背景。

它适用于我的固定宽度的屏幕。

但是当我调整屏幕宽度的大小时，它将失去正确的位置，显示图像的其他部分。

有人可以帮忙吗？

HTML

<div class="game">
  <div class="slice top_estrada"></div>
</div>

CSS

.game{
  display:block;
  width:100%;
  .slice{
    display:block;
    width:100%;
    background-image:url('/assets/maps/tilemaps/mymap.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    &.top_estrada{
      background-position:0 -125px;      // <========= HERE
      height:88px;                       // <========= AND HERE
    }
  }
}

.game {
  display: block;
  width: 100%;
}

.game .slice {
  display: block;
  width: 100%;
  background-image: url('https://i.imgur.com/rdx8FHt.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.game .slice.top_estrada {
  background-position: 0 -125px; // <========= HERE
  height: 88px; // <========= AND HERE
}

<div class="game">
  <div class="slice top_estrada">
    top_estrada
  </div>
</div>

Answer 1

用background-size: 100% auto;替换background-size: center center;以实现该目的。