在 Next.js 中，如何创建一个覆盖整个浏览器窗口的 bg 图像

Question

在下图中，我们必须将高度 100% 应用于 html 和 body 标签。但是如何在 next.js 组件中做到这一点？？

参考[1]：https://i.stack.imgur.com/K1r9l.png

[2]https://www.w3schools.com/howto/howto_css_full_page.asp

“mainImage.jsx”

import React from 'react';
import './mainImage.css'

export default ()=>(
    <div>
        <div className="bg"></div>
    </div>
)

“mainImage.css”

.bg {
    /* The image used */
    background-image: url("/public/jeep3.jpg");

    /* Full height */
    height: 100vh;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

应用高度后：100vh；我只显示长度而不是图像的空 div。

Answer 1

您需要将高度值更改为：

.bg {

height:100vh;

}