在Next.js中，如何创建覆盖整个浏览器的背景图片window

Question

在下图中，我们必须将 height 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;
}

申请后height:100vh；我只显示长度为空的 div 而不是图像。

Answer 1

您需要将高度值更改为：

.bg {

height:100vh;

}

在Next.js中，如何创建覆盖整个浏览器的背景图片window

In Next.js, how to create a bg image that covers the entire browser window

html

css

reactjs

next.js