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

Question

我想通过使用样式定义在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中设置背景图像并进行调整呢？

Answer 1

这有效:

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

Answer 2

如果您使用图像作为背景，最好使用 '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>

Answer 3

澄清另一个答案

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

Answer 4

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

\n\n

let imgUrl = \'images/berlin.jpg\'\nlet styles = {\nroot: {\n\n    background: \'url(\'+ imgUrl + \') noRepeat center center fixed\',\n    backgroundSize: \'cover\',\n}\n

\n\n

受到这篇文章的启发：在后台拉伸和缩放 CSS 图像 - 仅使用 CSS

\n