背景附件:固定在手机上 [英] background-attachment: fixed on mobile
问题描述
我正在尝试为spn Web应用程序设置背景图像，我需要固定背景(不会随页面其余部分一起滚动).
I'm trying to set a background image for an spn web app and I need the background to be fixed (that it won't be scrolled with the rest of the page).
这是正文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会重复背景，而不是将背景固定在一个点上.
Safari in IOS and Chrome on Android repeat the background instead of fixing it at one point.
我已经在互联网上看到它在移动设备上已被禁用，但是有解决方案吗?
I've seen on the internet it's been disabled on mobile but is there a solution?
推荐答案
还有其他选择可以做到这一点，但这是唯一对我有用的方法.而我几乎尝试了所有这些.
There are other options to doing this but this is the only one that actually worked for me; and i tried just about all of them.
您将div设置在初始标签的正下方.然后将图片应用于div中的html.同时指定div和id属性(在这种情况下为#background_wrap)....我尝试了此操作，但未在html中应用实际的图像链接，但它始终无法正常工作，因为在将图像应用于CSS中的背景时，您仍然必须使用"background-image:"属性.使此功能在移动设备上起作用的技巧是不使用任何背景图像设置.这些值是我的项目专用的，但是对于固定背景图像来说，它可以很好地保持居中并响应移动设备以及较大的计算机视口.可能需要为您的特定项目调整一些值，但是值得一试！我希望这会有所帮助.
You set the div just below the initial tag. Then apply the image to the html within the div. Give the div and id attribute as well (#background_wrap in this case). ...I tried this without applying the actual image link within the html and it never worked properly because you still have to use "background-image:" attribute when applying the image to the background within css. The trick to getting this to work on the mobile device is not using any background image settings. These values were specific for my project but it worked perfectly for my fixed background image to remain centered and responsive for mobile as well as larger computer viewports. Might have to tweak the values a bit for your specific project, but its worth a try! I hope this helps.
<body>
<div id="background_wrap"><img src="~/images/yourimage.png"/></div>
</body>
然后在CSS中应用这些设置.
Then apply these settings in the 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%;
}
这篇关于背景附件:固定在手机上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
