Question

我想通过使用样式定义在React.js中添加背景图像：

printf("%s\n",str2[k]);

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

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

但是图像不再加载了：

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

Answer 1

这有效：

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

Answer 2

澄清另一个答案

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

Answer 3

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

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

Answer 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>

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

4 个答案: