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

Question

我在飞镖中写了一个坦克游戏。这是27 * 27桌。对于每个字段，我使用background-image属性。例如，我的坦克由4个小场组成。坦克在光栅上只占用一个小场。但是通过伪级.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;