css - z-index 的背景图像不完全透明

Question

我正在用 dart 编写一个坦克游戏。它是 27 * 27 的表。对于每个字段，我都使用 background-image 属性。例如我的坦克由 4 个小区域组成。 Tank 在光栅上只占用 1 个小字段。但是通过伪类 .bg-player-left:before 如果实现的话，那个坦克看起来像 4 野战坦克。与子弹相同的想法。它在光栅上只需要一个字段，但看起来像 2。问题是，这个对象的左上角位置总是黑色的。

        .bg-water {
        background-image: url("../img/water-field.png");
        background-size: cover;
        background-repeat: no-repeat;
    }

    .bg-bush {
        background-image: url("../img/bush-field.png");
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0.8;
    }
.bg-bullet-up, .bg-bullet-down, .bg-bullet-left, .bg-bullet-right,
.bg-player-up, .bg-player-down, .bg-player-left, .bg-player-right {
    position: relative;
}

.bg-player-up:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0px;
    right: -15px;
    bottom: -15px;
    background-image: url("../img/player-tank-left.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.bg-bullet-up:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0px;
    right: -15px;
    bottom: -15px;
    background-image: url("../img/bullet-left.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

你也可以自己试试(https://javajunikorn.github.io/BattleCity/build/web/html/test.html) 为了移动坦克，您需要从移动设备或移动版本的浏览器检查器中启动游戏。

Answer 1

用伪类变形对象的有趣想法。

可能是因为您将 css 颜色背景设置为黑色，在子弹和坦克的 png 上造成了这种失真？ 如果我去这里:https://javajunikorn.github.io/BattleCity/build/web/img/bullet-left.png

我可以在 css 中看到这个属性:

背景:#0e0e0e;