css 设置背景图片铺满固定不动

页面原型

html

<div class="main"></div>

css

.main {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  background-image: url("../../assets/images/bg2.png");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center;
  float: left;
  }

Vue中使用less封装样式

less

// 封装背景图片样式
.bgImgStyle{
  position: relative;
  width: 100vw;
  min-height: 100vh;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center;
  float: left;
}

页面中导入

<style lang="less" scoped>
@import "../../../common/style/mixin.less";
.main {
  .bgImgStyle;
  background-image: url("../../assets/images/bg2.png");
}