Question

我正在尝试在组件中设置背景图像，但未显示。这是我的home组件代码。

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文件中将body 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>

Answer 2

您需要将高度测量值从％更改为vh，或者您必须为放置图像的容器设置尺寸，因为现在它的大小为0，并且图像从0px占用100％。您可以将容器设置为100vh，将bgimage设置为100％

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

2 个答案: