suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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

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


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

阿神阿神2782 Tage vor959

Antworte allen(9)Ich werde antworten

  • 巴扎黑

    巴扎黑2017-04-17 13:46:12

    html,body {
        margin: 0;
        padding: 0;
        min-height: 100vh;
        background-size: cover;
    }

    Antwort
    0
  • 迷茫

    迷茫2017-04-17 13:46:12

    background-size:cover;

    Antwort
    0
  • 高洛峰

    高洛峰2017-04-17 13:46:12

    /*新增加此条样式*/
    html,body{
        width:100%;
        height:100%;
    }
    

    Antwort
    0
  • PHP中文网

    PHP中文网2017-04-17 13:46:12

    background-size:cover
    background-position:center

    Antwort
    0
  • PHPz

    PHPz2017-04-17 13:46:12

    background-size:cover;

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

    Antwort
    0
  • 天蓬老师

    天蓬老师2017-04-17 13:46:12

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

    Antwort
    0
  • 迷茫

    迷茫2017-04-17 13:46:12

    background-size:cover;

    Antwort
    0
  • PHPz

    PHPz2017-04-17 13:46:12

    width:100%; height:100%;

    高度宽度撑开即可

    Antwort
    0
  • 天蓬老师

    天蓬老师2017-04-17 13:46:12

    建议了解一下background-size属性,https://segmentfault.com/a/11...,这是我写的对这个属性的解释,可以看一下,哈哈

    Antwort
    0
  • StornierenAntwort