CSS图像背景在不同浏览器中的问题

Question

我正在制作一个披萨定制前端，我们的想法是我们可以选择一种类型的披萨一半，另一种类型的另一半。

现在，我在 firefox vs chrome vs edge 中遇到了背景图像问题。

CSS：

.img-top{
  position:absolute;
  z-index:5;
  width:19%;
  padding:0.4rem;
  opacity:0.5;
  pointer-events:none;
}

.img-responsive{
  width: 100%;
  max-width: 100%;
  height: auto;
}

.hidden {
  visibility:hidden;
}

.sliced-img {
  position: absolute;
  width: 16.5%;
  margin-top:1.5rem;

  transition: ease 250ms;
}

.sliced-img-small{
  position: absolute;
  width: 10%!important;
  margin-top:5.5rem;
  transition: ease 250ms;
}

.slice {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-size: cover;
}

.esquerdo {
  left: 0;
  background-image: url('imagens/Layer -3.png'); 
  background-position: 0%;
  opacity:0.2;
}

.direito {
  left: 50%;
  background-image: url('imagens/Layer -3.png'); 
  background-position: -100%;
  opacity:0.2;
}

HTML：

 <div class="col-lg-12 d-flex justify-content-center">
                <div id="mudar" class="sliced-img-small ">
                    <img src='imagens/Layer 3.png' class='img-responsive hidden'>
                    <!--esta imagem é só para obter o tamanho correcto dinamicamente -->
                    <div class="slice esquerdo activo "></div>
                    <div class="slice direito activo"> </div>
                </div>
                <img src='imagens/marca_pizza.png' class='img-top'>
 </div>

例如：

和：

PS：我需要将图像分成 2，以便我可以在 javascript 中选择一半：p

Answer 1

问题是链接...

"图像/图层 3.png"

我改变了它并且它工作正常