在body中没有元素把高度撑开的情况下,怎么设置背景图铺满全屏?

html,body{
    background:url(../img/bg.jpg) center center no-repeat;    
}


经测试其他5.5寸以下的手机屏都能完整显示背景图
5.5的不行,页面底部会有30px的留白?

clipboard.png

阅读 22.2k
9 个回答
html,body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-size: cover;
}
background-size:cover;
/*新增加此条样式*/
html,body{
    width:100%;
    height:100%;
}
background-size:cover
background-position:center

background-size:cover;

图片本身不够宽高,用这个参数可以使图片满屏,就是会背景溢出窗口

很久以前做WEBAPP封面的时候觉得@media all and (min-device-pixel-ratio: 16/9) {...} 不错,但是最终没有机会使用,可以使用多张图,长宽比无非也就16:9,4:3,或者变态魅族15:9,不过楼主,我没试过。。。

background-size:cover;

width:100%; height:100%;

高度宽度撑开即可

推荐问题
宣传栏