Next.js项目全局添加背景图片失效问题求助

核心问题1：类名不匹配 #

你的页面组件里给div用的类名是myindex，但全局CSS里定义的样式类是.myclass，两者完全不对应，导致样式根本没作用到目标元素上。

核心问题2：图片路径错误 #

Next.js对静态资源的路径有明确要求：

• 静态图片必须放在项目根目录的public文件夹下
• CSS中引用图片时，要使用根路径（以/开头），而不是相对路径./，因为CSS文件的位置和图片的存放位置不在同一层级，相对路径会无法正确解析图片位置。

修正后的代码示例 #

1. 修正类名的页面组件（index.js）

import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })

export default function Index() {
  return (
       <div className="myclass"> {/* 类名与CSS定义的.myclass匹配 */}
            dcmkl
       </div>
  )
}

2. 修正路径的全局CSS（global.css）

.myclass{
  height: 1000px;
  width: 1000px;
  /* 图片放在public文件夹下，用根路径引用 */
  background-image: url('/pexels-johannes-plenio-1103970.jpg');
  background-size: cover; /* 可选：让图片铺满元素 */
}

进阶：全局页面背景的正确写法 #

如果你的需求是给整个网站添加全局背景，更合适的方式是给html或body设置样式，确保覆盖整个视口：

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* 确保高度覆盖整个视口 */
  background-image: url('/pexels-johannes-plenio-1103970.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

内容的提问来源于stack exchange，提问作者Asad Lukman