Background image with z-index not fully transparent - css

Question

Im writing a tank-game in dart. It's 27 * 27 table. For every single field I use background-image attribute. For example my tank consits of 4 small fields. Tank takes only 1 small field on raster. But through pseudo-class .bg-player-left:before if achieved, that tank looks like it 4 field-tank. Same idea with bullets. It takes only one field on raster, but looks like 2. The problem is, that top-left position of this objects is always black.
.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;
}
You can also try by yourself (https://javajunikorn.github.io/BattleCity/build/web/html/test.html)
In order to move tank you need to start the game from mobile or in browser inspector for mobile version.

Answer 1

interesting idea to morph the object with pseudoclass.
Could it be that you have a css color background set to black, which on that png for bullet and tank creates this distortion?
If I go here: https://javajunikorn.github.io/BattleCity/build/web/img/bullet-left.png
I can see this attribute in css:
background: #0e0e0e;