sass stack background images

Question

我正在编写一个浏览器游戏，需要有关sass和背景图像的帮助 我有一个地形（草，水）和实体（玩家，怪物）的世界。这是在一个大的html表中呈现的，每个td都会分配数据属性。

<td data-y="5" data-x="23" data-terr="1" class=""></td>
<td data-y="5" data-x="24" data-terr="0" class="player"></td>

根据这些属性，css然后应用正确的图像。

table td {
      padding: 0;
      background-size: 100% 100%;
      image-rendering: pixelated;
  &[data-terr="0"] {
    background-color: #060;
    background-image: url(#{$spritedir}/grass.png);
  }
  &[data-terr="1"] {
    background-color: #666;
    background-image: url(#{$spritedir}/water.png);
  }
  &.player {
    background-image: url(#{$spritedir}/hero.png);
  }
}

现在的问题是应用player类的字段，播放器会覆盖background-image并且地形消失。

但我想堆叠图片。像这样：

background-image: url(#{$spritedir}/grass.png),
                  url(#{$spritedir}/hero.png);

这可能与css / sass一起使用吗？我的意思是没有列出每个地形/实体组合。