pc端:

h5端 :

  •  min-height:100vh;  当页面内容不够一屏时,使背景图至少铺满一个屏幕的高度;
  • background加颜色是为了避免页面内容过长,背景图无法铺满,加与背景图相似的颜色使背景色填充背景图无法填充的那一部分。

屏幕太小,图片重要东西显示不完全

 min-height: 1300px;
 height: 100vh;
 background: #99d2ff url('~@/static/images/liuzi/liuzi_newbgc.jpg') no-repeat;
 background-size: 100% auto;

给一个最小高度,如果小于最小高度就产生滚动条。对于很高的屏幕则使用heigth:100vh,用颜色填满图片充不满的地方。

内容很多,背景图无限延申

    width: 100%;
    min-height: 100vh;
    background-image: url('~@/static/images/toupiao/toupiao-bg.jpg'),
        url('~@/static/images/toupiao/toupiao-bg-bot.jpg');
    background-position: left bottom, left top;
    background-repeat: no-repeat, repeat-y;
    background-size: 100% auto, 100% auto;

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐