我正在尝试使用 vue 3 构建一个网站并为其设置背景图片。但有一个神秘的白色区域无法去除。我确信这不是边距或填充，因为我已将所有边距和填充设置为 0，并删除了所有 ml ,pl 类。我将应用程序组件的黑底颜色设置为黑色，但该区域仍然是白色的。 chrome的inspect工具说这是一个html元素，请帮帮我。（我把backgroup图片放在Login.vue的style部分了。）
来自浏览器检查工具的信息：
用农药检查：
<!-- 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>
我把backgroup图片放在Login.vue的style部分。
<!-- 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 样式之间的许多令人沮丧的冲突。我建议仅使用其中一个框架！