Ich versuche, mit Vue 3 eine Website zu erstellen und ein Hintergrundbild dafür festzulegen. Aber es gibt einen mysteriösen weißen Bereich, der nicht entfernt werden kann. Ich bin mir sicher, dass es nicht an den Rändern oder der Auffüllung liegt, da ich alle Ränder und Auffüllungen auf 0 gesetzt und alle ml- und pl-Klassen entfernt habe. Ich habe die schwarze Hintergrundfarbe der Anwendungskomponente auf Schwarz gesetzt, aber der Bereich ist immer noch weiß. Das Inspektionstool von Chrome sagt, dass es sich um ein HTML-Element handelt. Bitte helfen Sie mir. (Ich habe das Backgroup-Bild in den Style-Bereich von Login.vue eingefügt.)
Informationen vom Browser-Checker:
Prüfen Sie mit Pestiziden:
<!-- index.html -->
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<!-- app.vue --!>
<template>
<div id="app">
<div class="container">
<router-view />
</div>
</div>
</template>
<script>
export default {
name: "app"
};
</script>
<style>
#app {
padding: 0;
margin: 0px;
background-color: black;
}
</style>
Ich habe das Backgroup-Bild in den Style-Bereich von Login.vue eingefügt.
<!-- Login.vue --!>
<template>
<div class="body" id="poster">
<el-form class="login-container">
<el-card>
<h4 class="login-title mb-2">Log in</h4>
<el-form-item>
<input type="text" class="form-control" id="username"
v-model="loginForm.username" placeholder="username"
/>
</el-form-item>
<el-form-item>
<input type="text" class="form-control" id="password"
v-model="loginForm.password" placeholder="password"
/>
</el-form-item>
<el-form-item>
<el-button @click="login" type="primary"
style="width: 100%">Submit</el-button>
</el-form-item>
</el-card>
</el-form>
</div>
</template>
<script>
import http from '../http'
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: 'login',
data() {
return {
loginForm: {
username: '',
password: ''
},
responseResult: [],
}
},
methods: {
login() {
const data = {
username: this.loginForm.username,
password: this.loginForm.password
}
http.post('/login', data)
.then(response => {
console.log(data);
if (response.data.code === 200) {
this.$router.push('/index')
}
})
.catch(e => {
console.log(e);
})
}
}
}
</script>
<style scoped>
.login-title {
text-align: center;
}
body {
}
#poster {
background: url("../assets/backgroud.jpg") no-repeat center;
height: 100%;
width: 100%;
background-size: cover;
position: fixed;
}
</style>
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')
// router.js
import { createWebHistory, createRouter } from "vue-router";
const routes = [
{
path: '/',
alias: '/login',
component: () => import('@/components/Login.vue')
},
{
path: '/index',
component: () => import('@/components/AppIndex.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router;
使用引导类
容器包装页面内容会导致最大宽度小于全屏宽度。 文档显示每个断点的最大宽度值。不仅如此，引导容器也有填充。如果你想删除空白空间，你应该将容器宽度设置为 100% 或使用类名
container-fluid，它可以做同样的事情，并且还可以删除你可以用类做的填充p-0顺便说一句，我注意到您同时使用了 Element Plus 和 Bootstrap，它们都是大型 CSS/组件框架。继续前进，您很可能会遇到两个框架及其竞争的 CSS 样式之间的许多令人沮丧的冲突。我建议仅使用其中一个框架！