【问题标题】: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;}
          

          【讨论】:

            猜你喜欢
            • 2017-02-19
            • 1970-01-01
            • 2023-03-03
            • 1970-01-01
            • 2018-05-08
            • 2016-09-27
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多