twitter-bootstrap 为什么此 CSS 不适用于 Android 上的 Chrome,但适用于其他任何地方?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/14030880/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does this CSS not work for Chrome on Android but works everywhere else?
提问by Nick Ginanto
This really puzzles me. I want to have pic.jpg be static in the background (not move when scrolling) and that it won't stretch.
这真的让我很困惑。我想让 pic.jpg 在背景中是静态的(滚动时不移动)并且它不会拉伸。
It works on every browser (i.e. Chrome, Safari, Firefox) except Chrome on Android (it even works on Android original browser)
它适用于除 Android 上的 Chrome 之外的所有浏览器(即 Chrome、Safari、Firefox)(它甚至适用于 Android 原始浏览器)
body{
background-color: transparent !important;
background-image: url(<%= asset_path "pic.jpg" %>);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Chrome for Android renders it as pic.jpg being halfway up in the screen, not on the entire page and doesn't stay static on scroll..
Chrome for Android 将其呈现为 pic.jpg 在屏幕的中间位置,而不是在整个页面上,并且不会在滚动时保持静态。
I can't reproduce it on jsfiddle, I also try to debug it with my Android phone and nothing seems to help.
我无法在 jsfiddle 上重现它,我也尝试用我的 Android 手机调试它,但似乎没有任何帮助。
Isn't this the way to create the background image?
这不是创建背景图像的方法吗?
采纳答案by Piotr M?sior
I do not wanna be cruel but this issue has been reported approximately 4 years ago
我不想变得残忍,但这个问题已经在大约 4 年前被报道过
http://code.google.com/p/android/issues/detail?id=3301
http://code.google.com/p/android/issues/detail?id=3301
most recent response can help I guess:
最近的回应可以帮助我猜:
In my experiments with Android, I noticed that all the other DIVs within the body behaved correctly, including centering, so I moved image to another DIV and it worked.
在我的 Android 实验中,我注意到身体内的所有其他 DIV 都表现正确,包括居中,所以我将图像移动到另一个 DIV 并且它起作用了。
Funny one.
有趣的一个。
best
最好的
回答by Davor Popovic
I have the similar problem.. and I fix it with this
我有类似的问题..我用这个解决了它
html{
height:100%;
min-height:100%;
}
body{
min-height:100%;
}
回答by JC Hulce
I have found a workaround that makes the background display correctly on Chrome for Android: define the background in the html tag, not the body. Here is the new css:
我找到了一种使背景在 Android 版 Chrome 上正确显示的解决方法:在 html 标签中定义背景,而不是正文。这是新的CSS:
html{
background-color: transparent !important;
background-image: url(<%= asset_path "pic.jpg" %>);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And yes, this is valid markup. In my experience, the background still works correctly in every other browser too.
是的,这是有效的标记。根据我的经验,背景在所有其他浏览器中仍然可以正常工作。

