如何使用CSS媒体查询将背景图片缩放至视窗大小

Question

我有一张很大的图片，作为网站的背景：

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

但是在我的移动设备上（iPhone 4S - Safari），background-attachment: fixed 没有像桌面端那样产生相同的效果。这是为什么？我能使用媒体查询来解决吗？

- greener

---

发生了什么？你能发布一个链接进行调查吗？ - Aequanox

移动版的SafariеЏЇиѓЅдёЌж”ЇжЊЃbackground-attachment: fixed。请查看https://dev59.com/YnA75IYBdhLWcg3w8-LZгЂ‚ - gaynorvader

Answer 1

尝试一下 - 您不总是需要媒体查询来处理背景图像。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%; 
}   

- Gatsby

---

不幸的是，在安卓平板设备中，封面和固定不重复背景在竖屏模式下无法正常工作。 - NoBugs

在你的CSS中加入"html{height:100%,width:100%}"以实现全屏显示。 - arp

@arp 真的太棒了。谢谢！那个解决了我在移动设备上背景图片不一致显示的问题！ - Pamela Cook - LightBe Corp