Question

我只是在Freecodecamp上学习和做作业。我的网站在桌面上以及浏览器调整大小时运行良好，但它完全搞砸了iOs。我在这里搜索了很多，特别是关于背景附件的部分：fixed＆amp; 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

好的，我通过使用＆＃39; Modernizr＆＃39;来实现这一目标。图书馆。然后我拿出了背景附件＆＃39;从每个全屏图像背景，并为非触摸设备单独声明：

       #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;}

iOs中的多个固定背景。无法让它发挥作用

1 个答案: