修复了安卓和苹果设备的背景答案

【问题标题】：Fixed background in android and apple devices修复了安卓和苹果设备的背景
【发布时间】：2017-10-06 05:37:05
【问题描述】：

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

.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 设置为掩护，初始设置，甚至尝试使用百分比。问题是在移动设备上，背景不会留在屏幕上。当我向下滚动时，它会与其余内容一起上升。

任何帮助将不胜感激。

【问题讨论】：

那么您希望附件在移动设备中固定还是滚动？
请告诉我们您希望修复什么或正常。修复了 css 属性在 Ipad 和移动设备上无法正常工作的问题。
我希望它始终保持在屏幕上。

标签： android html ios css background-size

【解决方案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;
}

【讨论】：