Question

我知道之前已经回答了这个问题，但我希望有人能告诉我如何在移动设备和平板电脑视图中禁用我的特定代码。每次我使用视差，然后在我的手机或平板电脑上查看我的网站时，它会将图像放大到无法识别的位置。我怎么能避免这个？谢谢。

.parallax {
   height: 800px;
   width: 100%;
   background-attachment: fixed;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: cover;
}

<div class="parallax" style="background-image: url('https://s3.amazonaws.com/media.ohi/15678_vegancooking_2o.jpg');">
   <p class="photog" style="color:#FFF;">name here</p>
</div>

Answer 1

试试这个

@media only screen and (max-width:749px) {
  .parallax {
    background-attachment: inherit;
  }
}

只需重置移动设备上的背景附件即可。

Answer 2

试试这个

@media only screen and (max-width:749px) {
  .parallax {
    background-attachment: scroll;
     background-size: 100% 100%;
   }
}

示例fiddle ..

如何禁用移动和平板电脑视图的视差？

2 个答案: