Question

我在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)
 }
}

编辑：我希望设置正文的背景图片。

Answer 1

你应该尝试这样

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>
    );
  }
}

Answer 2

如果<body>元素位于React.js应用程序之外（通常就是这种情况），那么，不是使用React.js来设置正文样式，而是可以使用vanilla javascript。

最新的（2018）方法是使用新 CSS类型对象模型（CSSOM），这将允许您循环通过mainBg并将每个属性和值添加到元素attributeStyleMap的{{1}}属性中。

工作示例：

＆＃13;

document.body

＆＃13;

Further Reading about the CSS Typed-Object Model (CSSOM)

背景图像未显示

2 个答案: