1

我正在尝试为 spn web 应用程序设置背景图像，并且我需要修复背景（它不会与页面的其余部分一起滚动）。

这是身体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 会重复背景，而不是一次性修复它。

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

4

2 回答 2

0 
background-repeat: no-repeat;
background-position: center center;
于 2016-12-16T19:01:24.857 回答
0

这样做还有其他选择，但这是唯一对我有用的选择；我几乎尝试了所有这些。

您将 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%;
     }
于 2017-04-12T04:36:40.483 回答