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

【问题标题】：React.js background full image is not workingReact.js 背景完整图像不起作用
【发布时间】：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（不反应）做这个时，它工作得很好。

我该如何解决这个问题？

【问题讨论】：

标签： css reactjs

【解决方案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;}

【讨论】：