reactjs - 如何在 React 中设置我的背景图像适合屏幕
问题描述
我正在尝试在组件中设置背景图像,但它没有显示。这是我的家庭组件代码。
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%,但背景图像仍然没有显示。
解决方案
它正在工作,似乎您需要将组件重命名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>
推荐阅读
- bulma - 如何使用 bulma 水平居中 bulma-calendar
- azure-devops - 在 DevOps Pipeline 单元测试中添加和使用 MDF
- input - Verilog 中的索引超出范围错误,尽管寄存器声明正确
- sql - SQL 过滤以显示仅在一列中具有值的行出现多次
- flutter - Apple 使用 Flutter 和 Auth0 登录
- python-3.x - Python Marshmallow AttributeError:“list”对象没有属性“get”
- angular - Angular (IONIC) - 无法读取未定义的属性“getInfos”
- c# - EF Core - 动态使用 DbSet 和泛型
- reporting-services - SSRS 管理浏览器中的报告不显示当前订阅但可在数据库中查看
- fft - 在MATLAB中计算时间信号的DFT