时间戳

首页 > 解决方案 > 背景图片不显示

css - 背景图片不显示

问题描述

我在 CDM 上设置背景图像，但document.body.style={mainBg}没有按预期设置背景图像，并且它下面的控制台语句打印出一个空字符串。谁能帮我弄清楚我做错了什么？

const mainBg = {
 backgroundImage: 'url("../img/background.jpg")',
 backgroundPosition: 'center',
 backgroundRepeat: 'no-repeat',
 backgroundAttachment: 'fixed',
 backgroundSize: 'cover',
};


class Home extends Component {
 componentDidMount() {
    console.log(mainBg);
    document.body.style = {mainBg};
    console.log(document.body.style.backgroundImage)
 }
}

编辑：我正在寻找为身体设置背景图像。

标签： cssreactjs

解决方案

你应该这样尝试

import Background from '../images/background_image.png';

var bckImg = {
  width: "100%",
  height: "400px",
  backgroundImage: `url(${Background})`
};

class Section extends Component {
  render() {
    return (
      <section style={ bckImg }>
      </section>
    );
  }
}

推荐阅读