我正在制作披萨定制前端,但我的想法是我们可以选择一种披萨的一半,而另一种披萨的另一半。
现在,我在Firefox,Chrome和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
问题是链接...
“ imagens / Layer 3.png”
我对其进行了更改,并且工作正常