我正在尝试使用 vue 3 构建一个网站并为其设置背景图片。但有一个神秘的白色区域无法去除。我确信这不是边距或填充,因为我已将所有边距和填充设置为 0,并删除了所有 ml ,pl 类。我将应用程序组件的黑底颜色设置为黑色,但该区域仍然是白色的。 chrome的inspect工具说这是一个html元素,请帮帮我。(我把backgroup图片放在Login.vue的style部分了。)
来自浏览器检查工具的信息:
用农药检查:
<%= htmlWebpackPlugin.options.title %>
我把backgroup图片放在Login.vue的style部分。
Log in
Submit
// 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;
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
使用引导类
容器包装页面内容会导致最大宽度小于全屏宽度。 文档显示每个断点的最大宽度值。不仅如此,引导容器也有填充。如果你想删除空白空间,你应该将容器宽度设置为 100% 或使用类名
container-fluid,它可以做同样的事情,并且还可以删除你可以用类做的填充p-0顺便说一句,我注意到您同时使用了 Element Plus 和 Bootstrap,它们都是大型 CSS/组件框架。继续前进,您很可能会遇到两个框架及其竞争的 CSS 样式之间的许多令人沮丧的冲突。我建议仅使用其中一个框架!