使用样式在 React.js 中设置背景答案

【问题标题】：Set background in React.js using style使用样式在 React.js 中设置背景
【发布时间】：2016-07-24 15:45:04
【问题描述】：

我想通过使用样式定义在 React.js 中添加背景图片，这很有效：

let imgUrl = 'images/berlin.jpg'    
let styles = {
        root: {
            backgroundImage: 'url(' + imgUrl + ')',
            overflow: 'hidden',
        },
        ...

如您所见，图像在 x 方向重复。所以我想通过以下方式扩展它：

let imgUrl = 'images/berlin.jpg'
let styles = {
    root: {
        backgroundImage: 'url(' + imgUrl + ')',
        backgroundImage: {
            flex: 1,
            resizeMode: 'cover', // or 'stretch'
        },
        overflow: 'hidden',
    },
    ...

但是图像不再加载：

那么在React.js中如何设置背景图片并调整呢？

【问题讨论】：

backgroundImage 重复，但对象键不能重复。合并 2.
@dandavis 谢谢，我该如何合并它们？使用 url: 'xxx' 还是 src: 'xxx'？
也许 backgroundImage 有一个 url 属性？不确定反应的映射，但我知道你不能重复键。你可以改用 CSS 吗？你可以模板

标签： javascript css reactjs

【解决方案1】：

你有没有尝试过这样的事情：

let imgUrl = 'images/berlin.jpg'
let styles = {
root: {

    background: 'url('+ imgUrl + ') noRepeat center center fixed',
    backgroundSize: 'cover',
}

灵感来自这篇文章：Stretch and scale a CSS image in the background - with CSS only

【讨论】：

不幸的是，以上内容并不完全正确 - 但你给了我正确的方向：
酷。你应该把你的最终代码发布给其他会问的人吗？
@Marcel 你可以为其他人发布完整的答案吗？谢谢！
@all 你可以在这里找到 Marcel 的方法：stackoverflow.com/a/36414070/1885946

【解决方案2】：

这行得通：

    let imgUrl = 'images/berlin.jpg'
    let styles = {
        root: {
            backgroundImage: 'url(' + imgUrl + ')',
            backgroundSize: 'cover',
            overflow: 'hidden',
        },
        ...

【讨论】：

【解决方案3】：

澄清另一个答案

let imgUrl = 'images/berlin.jpg'
let styles = {
    root: {
       backgroundImage: `url(${ imgUrl })`
       backgroundRepeat  : 'no-repeat',
       backgroundPosition: 'center',
  }
}

【讨论】：

【解决方案4】：

如果您使用图像作为背景，最好使用 'backgroundImage' 属性。

如果您使用 'background' 属性，这可能会导致重新加载组件时出现问题（例如，'cover' 属性将无法正确应用）。

提出的解决方案：

let imgUrl = 'images/berlin.jpg'; 

<div className = 'Component-Bg' 
     style = {{ backgroundImage: `url(${imgUrl})`,
                backgroundSize: 'cover', 
                backgroundPosition: 'center center',
                backgroundRepeat: 'no-repeat',
              }}>
</div>

【讨论】：