时间戳

首页 > 解决方案 > Reactjs 背景图像仅在有组件的地方显示

javascript - Reactjs 背景图像仅在有组件的地方显示

问题描述

我正在尝试为我的网站制作全屏背景图像，但它似乎不起作用。我当前的代码只显示了渲染组件的背景图像部分。我曾尝试background-position: fixed在 App.css 文件中使用，但背景图像变成全屏但我无法滚动，这更糟糕。我怎样才能让它工作？

我的网站现在的样子：

我的网站现在的样子。

我试图设置min-width: 100vw，min-height: 100vh但现在网页顶部仍然有同样的问题，网页变得可滚动。

编辑的网页：

编辑的网页

下面分别是我的 App.js 和 App.css 的文件。

class App extends Component {
    componentDidMount() {
        this.props.onAuthCheck();
    }

    render() {
        const auth = this.props.token !== null;
        return (
            <BrowserRouter>
                <div className="App">
                    <Route path="/" exact component={Login} />
                    <Route path="/signup" exact component={SignUp} />
                    <GuardedRoute
                        path="/home"
                        component={Home}
                        auth={auth}
                        exact
                    />
                    <GuardedRoute
                        path="/stocks"
                        component={Stocks}
                        auth={auth}
                        exact
                    />
                    <GuardedRoute
                        path="/News"
                        component={News}
                        auth={auth}
                        exact
                    />
                    <GuardedRoute
                        path="/profile"
                        component={Profile}
                        auth={auth}
                        exact
                    />
                    <GuardedRoute
                        path="/your-analysis"
                        component={YourAnalysis}
                        auth={auth}
                        exact
                    />
                    <GuardedRoute
                        path="/create-analysis"
                        component={CreateAnalysis}
                        auth={auth}
                        exact
                    />
                </div>
            </BrowserRouter>
        );
    }
}
.App {
    background-image: url('./assets/login-bg.jpg');
    min-width: 100%;
    min-height: 100%;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    list-style: none;
}

标签： javascripthtmlcssreactjs

解决方案

尝试这个：

.App {
    background-image: url('./assets/login-bg.jpg');
    min-width: 100%;
    min-height: 100vh;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    list-style: none;
}

或者您可以将背景图像设置为<body>

推荐阅读