使用vue2和css样式添加背景图片

<template>
  <div>
    <div class="ma">
      <div class="mi">
        <!-- 登录表格 -->
          <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="form.username"></el-input>
          </el-form-item>

          <el-form-item label="密码">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>
<style>
.ma {
  /* //这里地址是用项目中图片所在路径为准 */
  background: url("../assets/2.jpg");
  /* //将图片样式不重复 */
  background-repeat: no-repeat;
  /* //设置图片大小 */
  background-size: 100%;
  /* 设置全屏 */
  position: fixed;
  /* 设置div高度 */
  height: 100%;
  /* 设置div宽度 */
  width: 100%;
}
.mi {
  width: 400px;
  height: 400px;
  padding-right: 20px;
  padding-top: 20px;
  position: fixed;
  top: 30%;
  right: 10%;
  background-color: rgba(255, 255, 255, 0);
  border: none;
}

</style>

样式为：