在 Vue 中，scoped 样式无法作用于 html 或 body 等根级元素，因其超出组件 DOM 范围；正确做法是将背景图应用到组件内部的容器元素（如带 class 的 ），而非试图修改全局文档结构。 在 Vue 中，`scoped` 样式无法作用于 `html` 或 `body` 等根级元素，因其超出组件 DOM 范围；正确做法是将背景图应用到组件内部的容器元素（如带 class 的 ``），而非试图修改全局文档结构。Vue 的 机制通过为组件内元素动态添加唯一属性（如 data-v-f3f3eg9）并重写 CSS 选择器，实现样式局部化。但 html 和 body 是整个页面的顶层容器，不属于任何单个 .vue 组件的模板范围，因此即使你在组件中写了 body { background: ... } 并加上 scoped，Vue 也会自动将其编译为类似 body[data-v-f3f3eg9] { ... } —— 而 body 元素本身并不会被注入该属性，导致规则完全不匹配，背景图自然不会生效。✅ 正确实践：在组件模板中定义一个包裹容器，并对其应用背景样式： 欢迎来到我的页面 此背景仅在此组件内可见 // 可选：组合式 API 逻辑 .background-container { min-height: 100vh; background: url(@/assets/background.jpg) no-repeat center/cover; padding: 2rem; } ⚠️ 注意事项：使用 @/assets/... 路径（基于 vite 或 vue-cli 的别名配置）确保资源被正确解析和打包；设置 min-height: 100vh（而非 height: 100vh）以保证内容撑开时背景仍覆盖可视区域；避免在 scoped 样式中尝试穿透父级（如 :deep(body)）——这不仅无效，还违背组件封装原则；若需多个组件共享同一背景逻辑，可抽取为可复用的 BackgroundWrapper 组件或 CSS 类（配合非 scoped 的工具类样式）。? 总结：Vue 的 scoped 样式是“组件边界内”的契约，而非全局样式沙盒。真正可控、可维护、符合 Vue 设计哲学的方式，永远是让样式作用于组件自身渲染的 DOM 节点，而非越界操作文档根节点。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！