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

修复了android和apple设备的背景

1 个答案: