當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue3 css实现背景图片

發布時間：2024/1/1 vue 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue3 css实现背景图片小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

style中background-image屬性決定圖片?

實現源碼（注意兩個class）

<template><a-layout class="logincontent"><a-formclass="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-passwordv-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>

效果圖

總結

以上是生活随笔為你收集整理的Vue3 css实现背景图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。