背景固定在移动设备上答案

【问题标题】：Background Fixed on Mobile Devices背景固定在移动设备上
【发布时间】：2018-08-19 20:47:28
【问题描述】：

我想在固定背景上制作流动内容。它在桌面上完美运行。在 iOS 上也可以，但并不完美。主要问题出在安卓手机上。它不涵盖内容。如果你想编辑它，这里是CodePen链接。

body{
  height:200vh;
}
#one{
  height:300px;
  width:100%;
  background:url('https://www.w3schools.com/w3css/img_fjords.jpg') center center no-repeat fixed/cover;
}
#two{
  padding-top:30px;
  background-color:grey;
  height:400px;
  padding-left:10px;
}
.column{
  width:calc((100% / 3) - 10px);
  height:200px;
  float:left;
  margin-right:10px;
  background:url('https://www.w3schools.com/w3css/img_fjords.jpg') center center no-repeat fixed/cover;
}

<body>
  <section id="one"></section>
  <section id="two">
    <div class="column column_one"></div>
    <div class="column column_two"></div>
    <div class="column column_three"></div>
  </section>
</body>

【问题讨论】：

您知道吗，您已将高度设置为300px？

标签： html css background fixed background-attachment

【解决方案1】：

您可以将固定的背景图片放置到单独的专用 div 中，而不是浏览器背景本身。将您的 div 设置为视口高度和宽度的 100%，给它一个固定的位置和 -10 的 z-index，然后将所有背景图像样式放置在该 div 中，将浏览器背景留空。

不知道其他解决方法。安卓有问题...

【讨论】：