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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐