小编Jac*_*k B的帖子

在nextjs中将背景图像设置为div不起作用

我是 nextjs 的新手,我不明白为什么没有为此 div 设置背景图像。在根目录中,我有一个名为 public 的文件夹,其中包含art-thing.jpg文件。styles.css在根目录中。index.js位于根目录的 pages 目录中。我可以将背景设置为颜色,但无法将其设置为图像。有人有类似问题的帖子,但我希望我的 css 不是内联的。

样式文件

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    margin: 0px;
    padding: 0px;
}
.page-container {
    height: 100vh;
    position: relative;
}

.page-container-welcome {
    height: 100vh;
    position: relative;
    background-size: cover;
    background-image: url("/public/img/Branding/art-thing.jpg");
}
.content-wrap{
    padding-bottom: 2.5rem;
}
Run Code Online (Sandbox Code Playgroud)

索引.js


import 'bootstrap/dist/css/bootstrap.min.css';
import Head from 'next/head';
import HekateNav from "../client/components/nav";
import Footer from "../client/components/footer";

function Home() {
    return (
        <div>
            <Head>
                <title>Hekate</title>
            </Head>

            <div className="page-container-welcome"> …
Run Code Online (Sandbox Code Playgroud)

html css jsx next.js

3
推荐指数
1
解决办法
3687
查看次数

标签 统计

css ×1

html ×1

jsx ×1

next.js ×1