我已经有一段时间试图修复它但没办法。 我正在开发一个网站,实际上它可以在各个方面调整自己,除了移动版本,其中由3个图像形成的视差部分真的被缩放。
here a little example how it is on mobile phone
有关如何修复它的任何建议?我留下部分代码和the working website here
的CSS:
.parallax-section {
background-attachment: fixed ;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
@media only screen and (max-width: 767px) {
.parallax-section {
background-position: center top !important;
background-attachment: scroll !important;
}
@media (min-width: 768px) and (max-width: 979px) {
.parallax-section {
background-position: center top !important;
background-attachment: scroll !important;
}
#home .bg-img {
padding: 200px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
top: -200px;
left: -200px;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center center;
}
HTML:
<section id="home">
<div id="slitSlider" class="sl-slider-wrapper">
<div class="sl-slider">
<!-- single slide item -->
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
<div class="sl-slide-inner">
<div class="bg-img bg-img-1 heading animated fadeInRight"></div>
<div class="carousel-caption">
</div>
</div>
</div>
<!-- /single slide item -->
</div><!-- /sl-slider -->
<nav id="nav-arrows" class="nav-arrows">
<span class="nav-arrow-prev">Previous</span>
<span class="nav-arrow-next">Next</span>
</nav>
<nav id="nav-dots" class="nav-dots">
<span class="nav-dot-current"></span>
<span></span>
<span></span>
</nav>
</div><!-- /slider-wrapper -->
</section>