我在我网站的图片库部分添加了视差效果。该效果在普通桌面和浏览器的响应模式下效果很好。然而，当我尝试在我的手机(iPhone 6)中查看相同内容时，该部分的背景并没有保持固定，而是延伸到该部分的整个内容，使背景非常放大和像素化。
这是我的 html:
<section id="projects">
<div class="parallax">
<div class="container" style="padding-bottom: 30px;">
<div class="row">
<h3 class="section-header-inverse wow fadeInUp" data-wow-delay="200ms" data-wow-duration="500ms">Our Projects</h3>
</div>
<div class="row">
<div class="container">
<div class="gallery">
<div class="row">
<div class="container">
<div class="col-md-12">
<div class="col-sm-3">
<div class="thumbnail">
<a href="www/images/projects/500x500.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="Beautiful Image" /></a>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<a href="www/images/projects/750x500.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="" /></a>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<a href="www/images/projects/600x300.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="Beautiful Image" /></a>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<a href="www/images/projects/900x800.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="" /></a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="col-md-12">
<div class="col-sm-3">
<div class="thumbnail">
<a href="www/images/projects/500x500.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="Beautiful Image" /></a>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<a href="www/images/projects/750x500.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="" /></a>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<a href="www/images/projects/600x300.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="Beautiful Image" /></a>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<a href="www/images/projects/900x800.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="" /></a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="col-md-12">
<div class="col-sm-3">
<div class="thumbnail">
<a href="www/images/projects/500x500.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="Beautiful Image" /></a>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<a href="www/images/projects/750x500.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="" /></a>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<a href="www/images/projects/600x300.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="Beautiful Image" /></a>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<a href="www/images/projects/900x800.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="" /></a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
这是该部分的 css:
#projects {
text-align: center;
padding-bottom: 2%;
}
/*Project Section CSS*/
.parallax {
background-image: url('../images/backgrounds/bg.jpg');
/* Set a specific height */
/*height: 600px;*/
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.gallery img {
max-width: 100%;
max-height: 100%;
}
.gallery .row {
padding-bottom: 10px;
}
@media (max-width: 767px) {
.gallery .thumbnail {
padding-bottom: 7px;
}
}
.gallery .thumbnail {
-webkit-transition: all 150ms ease-out;
-moz-transition: all 150ms ease-out;
-o-transition: all 150ms ease-out;
transition: all 150ms ease-out;
}
.gallery .thumbnail:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all 150ms ease-in;
-moz-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
transition: all 150ms ease-in;
}
我什至尝试为属性添加供应商前缀。但它仍然不起作用。请帮助我按预期工作。
网站可以访问here
最佳答案
我正在展示一个适用于所有设备的示例，即 iPhone、iPad、Android、Windows。如您所见，方法论有所不同。
<!DOCTYPE html>
<html>
<head>
<title>Parallax</title>
</head>
<style>
.section-one {
position:relative;
height:662px;
}
.section-one:before {
content:'';
background:blue url('2.jpg') no-repeat;
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
}
</style>
<body>
<section class="section-one"></section>
</body>
</html>
关于html - 视差效果在浏览器中有效，但在移动设备中无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44341595/