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

时间:2018-06-11 08:19:25

标签: css

我在飞镖中写了一个坦克游戏。这是27 * 27桌。对于每个字段,我使用background-image属性。例如,我的坦克由4个小场组成。坦克在光栅上只占用一个小场。但是通过伪级.bg-player-left:before如果实现的话,那个坦克看起来像是4级坦克。与子弹相同的想法。栅格上只有一个字段,但看起来像2.问题是,这个对象的左上角始终是黑色。

enter image description here

        .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) 为了移动坦克,您需要从移动设备或浏览器检查器中为移动版本启动游戏。

1 个答案:

答案 0 :(得分:0)

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

难道你有一个css颜色背景设置为黑色,那个png上的子弹和坦克会产生这种失真吗? 如果我去这里:https://javajunikorn.github.io/BattleCity/build/web/img/bullet-left.png

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

背景:#0e0e0e;