Vue3 css实现背景图片

style中background-image属性决定图片 

<style>
.logincontent {
  display: flex;
  flex-direction: column;
  background-image: url("/src/assets/background.png");
  background-size: 100% 100%;
  background-attachment: fixed;

  width: 100%;
  height: 100%;
  min-width: 900px;
  min-height: 1000px;

  justify-content: center;
  align-items: center;
}
.loginform {
  background-color: #fff;
  min-width: 600px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px;
  padding: 30px 20px;
}
</style>

实现源码 （注意两个class）

<template>
  <a-layout class="logincontent">
    <a-form
      class="loginform"
      :model="user"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-typography-title style="text-align: center"
        >用户登录</a-typography-title
      >
      <a-form-item label="公钥" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input v-model:value="user.public_key" placeholder="请输入公钥" />
      </a-form-item>
      <a-form-item label="私钥" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input-password
          v-model:value="user.private_key"
          placeholder="请输入私钥"
        />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
        <a-row type="flex" justify="space-between">
          <a-button type="primary" @click="login">登录</a-button>
          <a-button type="link" @click="goToRegister"
            >没有账号？立即注册</a-button
          >
        </a-row>
      </a-form-item>
    </a-form>
  </a-layout>
</template>
<script setup>
import { reactive } from "vue";
import { post, setLocalToken, tip } from "@/common";
import { useRouter } from "vue-router";

const router = useRouter();

//reactive 双向绑定响应框
const user = reactive({
  public_key: "",
  private_key: "",
});

const goToRegister = () => {
  router.push({ path: "/register" });
};

const login = () => {
  console.log("登录!");
  post("/security/login", user).then((res) => {
    tip.success("登陆成功！");
    const token = res.data; //获取返回的令牌
    // 将令牌存储在本地
    setLocalToken(token);

    // 跳转至Home路由
    router.push({ path: "/home" });
  });
};
</script>
<style>
.logincontent {
  display: flex;
  flex-direction: column;
  background-image: url("/src/assets/background.png");
  background-size: 100% 100%;
  background-attachment: fixed;

  width: 100%;
  height: 100%;
  min-width: 900px;
  min-height: 1000px;

  justify-content: center;
  align-items: center;
}
.loginform {
  background-color: #fff;
  min-width: 600px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px;
  padding: 30px 20px;
}
</style>

效果图