如何使用 CSS 媒体查询将背景图像缩放到查看窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15687778/
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
How to use CSS media query to scale background-image to viewing window
提问by greener
I have this large image as a background for a website:
我有这张大图作为网站的背景：
body {
background: #000 url(/assets/img/living.jpg) no-repeat center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100%;
}
But on my mobile device (iPhone 4S - Safari), the background-attachment: fixeddoes't seem to be having the same effect as it would on a desktop. Why is that and can I use a media query to fix that?
但是在我的移动设备（iPhone 4S - Safari）上，background-attachment: fixed它的效果似乎与在台式机上的效果不同。为什么会这样，我可以使用媒体查询来解决这个问题吗？
回答by Gatsby
Try this - you don't always need a media query to handle background images. The CSS3 background-size:cover property handles all that quite well on its own. The below works well for me on all mobile devices I've tested - especially well on Android, mobile version browsers and all tablets.
试试这个 - 您并不总是需要媒体查询来处理背景图像。CSS3 background-size:cover 属性可以很好地处理所有这些。以下内容适用于我测试过的所有移动设备 - 特别适用于 Android、移动版浏览器和所有平板电脑。
body {
background-image: url(/assets/img/living.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100%;
width:100%;
}
