Проблема с CSS изображением в разных браузерах - PullRequest
Новая
       16

Проблема с CSS изображением в разных браузерах

0 голосов
/ 27 февраля 2020

Я делаю пиццу по индивидуальному заказу, и идея заключается в том, что мы можем выбрать половину пиццы одного типа, а другую половину другого типа.

Теперь у меня проблемы с фоновым изображением в firefox против chrome против края.

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>

например:

Firefox

и:

chrome

PS: мне нужно разделить изображение на 2, чтобы я мог выбрать половину в javascript : p

1 Ответ

0 голосов
/ 27 февраля 2020

Проблема в ссылке ...

"imagens / Layer 3.png"

Я изменил его и он работает нормально

...