html - iO 中的多个固定背景。无法正常工作

Question

我只是在 Freecodecamp 上学习和做作业。我的网站在桌面上运行良好，并且在调整浏览器大小时也能正常运行，但在 iO 上却完全乱七八糟。我在这里搜索了很多，尤其是关于 background-attachment:fixed 和 background-size:cover 的部分，但我看到的所有解决方案都不适用于我的情况。

#parralax1 {background-image: url("https://image.ibb.co/kiRzfF/Office.jpg");
       background-attachment: fixed;
       height: 100%;
       max-height: 100vh;
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
       -webkit-background-size: cover;
       position: relative;
       z-index: -1;

我有 4 个一个接一个。我一直在尝试各种媒体查询但没有成功。刚才那个是:

 @media screen and (max-device-width: 736px)
 {img{max-width: 100vw; height: auto;}
 #parralax1
 {background-image: url("https://image.ibb.co/kO8MPv/Office960.jpg");
 display: block;
 top: 0;
 left: 0;
 -webkit-text-size-adjust:none;
 background-repeat: no-repeat important!;  
 background-size: cover important!;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-attachment: scroll important!;
 height: 100vh;
 width: 100%;
 z-index: -10;
 overflow-y: scroll;}
 }

我只是无法让它工作。谁能帮忙？请参阅下面的完整站点:

my Codepen site

Cut down version

Answer 1

好的，我通过使用“Modernizr”库让它工作。然后我从每个全屏图像背景中取出“背景附件”，并为非触摸设备单独声明:

       #parralax1 {background: url("https://image.jpg") 
       no-repeat center   center;
       height: 100vh;
       width: 100vw;  
       left: 50%;
       right: 50%;
       margin-left: -50vw;
       margin-right: -50vw;
       position: relative;
       background-size: cover;
       -webkit-background-size: cover;
       z-index: -1;
       }

然后:

       .no-touch #parralax1 {background-attachment: fixed;}

然后我的媒体查询会处理剩下的事情:

       @media screen and (max-device-width: 736px)
       {#parralax1 {background-image: url("https://image.jpg")
       !important;
       max-width: 736px;
       max-height: 736px;
       z-index: -1;
       overflow-y: scroll;}