如何使用CSS媒体查询缩放背景图像视窗(How to use CSS media query to

2019-08-18 03:58发布

我有这样大的图像作为一个网站的背景：

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简化版，似乎有同样的效果，因为它会在桌面上。这是为什么，我可以使用媒体查询来解决这个问题？

Answer 1:

试试这个 - 你并不总是需要一个媒体查询处理背景图像。 CSS3的背景大小：涵盖财产处理所有真切自身。下面的工作很适合我在我测试过的所有的移动设备 - 尤其是好于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%; 
}