我正在嘗試使用 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 樣式之間的許多令人沮喪的衝突。我建議僅使用其中一個框架！