背景附件：固定在手机上答案

【问题标题】：background-attachment: fixed on mobile背景附件：固定在手机上
【发布时间】：2017-05-02 14:31:13
【问题描述】：

我正在尝试为 spn 网络应用程序设置背景图像，我需要修复背景（它不会随着页面的其余部分滚动）。

这是正文 css：

body {
  background-color: rgb(51, 102, 102);
  background-image: url('../images/background.png');
  background-attachment: fixed;
  background-position: center;
  color: #eee;
}

IOS 中的 Safari 和 Android 上的 Chrome 会重复背景，而不是一次性修复它。

我在互联网上看到它在移动设备上被禁用但有解决方案吗？

【问题讨论】：

标签： android ios css fixed background-attachment

【解决方案1】：

background-repeat: no-repeat;
background-position: center center;

【讨论】：

【解决方案2】：

还有其他选项可以做到这一点，但这是唯一对我有用的选项；我几乎都试过了。

您将 div 设置在初始标记的正下方。然后将图像应用到 div 中的 html。也提供 div 和 id 属性（在这种情况下为#background_wrap）。 ...我在没有在 html 中应用实际图像链接的情况下尝试了这个，但它从未正常工作，因为在将图像应用到 css 中的背景时，您仍然必须使用“background-image：”属性。让它在移动设备上工作的诀窍是不使用任何背景图像设置。这些值是特定于我的项目的，但它非常适合我的固定背景图像保持居中并响应移动设备以及更大的计算机视口。可能需要为您的特定项目稍微调整值，但值得一试！我希望这会有所帮助。

<body>
     <div id="background_wrap"><img src="~/images/yourimage.png"/></div>
</body>

然后在 CSS 中应用这些设置。

#background_wrap {
margin-left: auto;
margin-right: auto;   
}
    #background_wrap img {
        z-index: -1;
        position: fixed;
        padding-top: 4.7em;
        padding-left: 10%; 
        width: 90%;
     }

【讨论】：