html - 修复了在移动设备上滚动时背景图像放大的问题

Question

这是我的第一个问题。正如标题所说，我在移动设备上遇到固定背景图像的问题。当我向下滚动时，它会稍微放大，当我向上滚动时，它会恢复到原始大小。我不明白为什么。在提问之前，我浏览了所有关于这个主题的已经提出的问题，我也问了几个 friend ，但老实说我还没有找到答案。

这是我的 website我在哪里遇到这个问题，请在您的移动浏览器中打开它。

这是我的 Github存储库，您可以在其中查看我的所有代码。

这是我在其他相关帖子中发现的一些我正在使用的东西:

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

CSS

.bg {
     background: url(./app/assets/images/2.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
    width: 100%; 
}

谢谢大家的宝贵时间!

Answer 1

这对我有用，主要是

background-size: cover;

height: 100vh;

 content: '';  
 position: fixed; /* Important */
 top: 0px;
 left: 0px;
 z-index: -1; 
 height: 100vh;
 width: 100%;
 background: url('<?php echo $background_image;?>');
 opacity: 0.8;
 background-repeat: no-repeat;
 background-position: center;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;