vue+elementui设置div背景图片

效果图：

绑定Class选择器进行设置：

<template >
  <div class="login">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm aaa" >
      <el-form-item label="用户名" prop="name">
        <el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
    export default {
    
    
        name: "Login",
      data(){
    
    
        return {
    
    
          ruleForm: {
    
    
            pass: '',
            name: ''
          },
          rules: {
    
    
            pass: [
              {
    
     required: true, message: '请输入密码', trigger: 'blur' },
              {
    
     min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            name: [
              {
    
     required: true, message: '请输入用户名称', trigger: 'blur' },
              {
    
     min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ]
          }
        }
      },
      methods: {
    
    
        submitForm(formName) {
    
    
          this.$refs[formName].validate((valid) => {
    
    
            if (valid) {
    
    
              alert('submit!');
            } else {
    
    
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
    
    
          this.$refs[formName].resetFields();
        }
      }
    }
</script>

<style scoped>
  /*设置样式*/
 .demo-ruleForm{
    
    
   border: 1px solid #DCDFE6;
   width: 350px;
   margin: 180px auto;
   padding: 35px 120px 15px 25px;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   box-shadow: 0 0 25px #909399;
 }

/* 背景图片*/
  .login{
    
    
    background:url("../assets/55.jpg");
    width: 100%;
    height: 100%;
    position:fixed;
    margin-top: -65px;/*上边距*/
    margin-left: -10px;/*左边距*/
    background-size:100% 100%;
    }

  /* 背景图片*/
  .aaa{
    
    
    background:url("../assets/4.jpg");
    width: 26%;
    height: 24%;
    position:fixed;
    margin-top: 260px;/*上边距*/
    margin-left:460px;/*左边距*/
    background-size:100% 100%;
  }

</style>