我想在我的项目中添加背景图片,但是它不起作用。
我尝试全局添加背景图片,但是它不起作用。这是Next.js的首页代码。
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export default function index() {
return (
<div className="myindex">
dcmkl
</div>
)
}
this is global.css file
样式在这
.myclass{
height: 1000px;
width: 1000px;
background-image: url('./pexels-johannes-plenio-1103970.jpg');
}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
最佳的存储本地图片的位置是您项目根目录下的公共文件夹(及其子文件夹)。您可以像这样从该位置导入图片到您的页面或组件中
然后应用内联样式:
<div style={{ backgroundImage: `url(${someImage})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center', width: '100%', height: '100%' }}> </div>