Question

我正在尝试为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会重复播放背景而不是一次修复它。

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

Answer 1

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

Answer 2

还有其他选择，但这是唯一一个对我有用的选项;我尝试了所有这些。

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

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

background-attachment：固定在手机上

2 个答案: