React.js 背景完整图像不起作用

Posted 2023-02-21

【中文标题】React.js 背景完整图像不起作用

【英文标题】：React.js background full image is not working

【发布时间】：2018-10-23 03:06:07

【问题描述】：

我想将图像显示到整页。

[index.js]

import React,  Component  from 'react';
import './index.css';

export default class index extends Component 
  render() 
    return (
        <div className="container">
            123
        </div>
    );
  

[index.css]

body 
    background: url("../../img/image.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: bisque;

但它似乎无法正常工作。

当我用 html/css（不反应）做这个时，它工作得很好。

我该如何解决这个问题？

【参考方案1】：

你应该看看this tutorial from css-tricks.com。他们详细解释了如何让您的背景图片显示在整页上。

在您的代码中，您应该尝试将背景应用于 html 标签而不是 body 标签。

【参考方案2】：

内联样式设置任何全屏图像：

            backgroundImage: "url(" + "https://images.pexels.com/photos/34153/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" + ")",
            backgroundPosition: 'center',
            backgroundSize: 'cover',
            backgroundRepeat: 'noRepeat',

【参考方案3】：

不记得解决此问题的正确方法，但这在我搜索答案时帮助了我。

Setting a backgroundImage With React Inline Styles

【参考方案4】：

背景位置设置背景图像的起点为中心。因此，将背景位置设置为其默认值（左上角）。

body 
background: url("../../img/image.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-color: bisque;