android - 修复了安卓和苹果设备的背景

Question

所以这是我的问题。我使用以下代码将背景图片设置为页面:

.page-content{
    background-image: url("../../../../assets/pages/media/bg/3.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
    background-size:cover;

}

似乎工作正常。然后我为移动版本添加了一些

@media(max-width:991px){.page-content{
    background-attachment: scroll;
    }
}

我尝试将 background-size 设置为封面、首字母，甚至尝试使用百分比。问题是在移动设备上，背景不会停留在屏幕上。当我向下滚动时，它会与其余内容一起上升。

任何帮助将不胜感激。

Answer 1

我相信大多数(如果不是所有的话)手机都不支持固定背景图片。你所要做的就是将图像放在一个固定位置的单独的 div 中。以下代码由@vincent提供 - background: fixed no repeat not working on mobile 它用于 body 元素，但我相信您可以对其进行调整以满足您的需要。

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: -10;
  background: url(photos/2452.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}