Question

我想在固定的背景上播放内容。它在桌面上完美运行。在iOS上也可以，但不完美。主要问题是Android手机。它不包含内容。如果您想要进行修改，请点击CodePen链接。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

不知道其他解决方法。 android是错误的......

移动设备上固定的背景

1 个答案: