如何在 React 中设置背景图像适合屏幕

Question

我试图在组件中设置背景图像，但它没有显示。这是我的家庭组件代码。

homecomponent.js

import React, { Component } from "react";
import logo from "./logo.png";
import CreateUser from "./create-user.component";
import { BrowserRouter as Switch, Route, Link } from "react-router-dom";
import "./custom.css";

export default class home extends Component {
  render() {
    return (
        <div className="container-fluid homepage-bgimage"></div>
    );
  }
}

custom.css 文件代码 -

.homepage-bgimage {
  background: url("http://abcd.com/static/media/slide.504dc6e6.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

我还在index.css 文件中将正文 html 添加到 100%，但背景图像仍然没有显示。

Answer 1

它正在工作，似乎您需要将组件重命名Home为而不是home

.homepage-bgimage {
  background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<div class="container-fluid homepage-bgimage"></div>