0

我想在固定的背景上做流动的内容。它在桌面上完美运行。在 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>

4

1 回答 1

0

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

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

于 2018-03-11T21:34:33.050 回答