使用样式在React.js中设置背景 [英] Set background in React.js using style

问题描述

我想通过使用样式定义在React.js中添加背景图片，它起作用：

I want to add a background image in React.js by using a style definition, which works:

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

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

As you can see, the image repeats in x-direction. So I wanted to extend it by:

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

但是图像不再被加载：

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

So how to set the background image and adjust it in React.js?

推荐答案

这有效：

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

这篇关于使用样式在React.js中设置背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！