IT技术 - 使用样式在 React.js 中设置背景 - 吾爱随笔录

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

IT技术 javascript css reactjs

2021-05-09 18:15:01

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

4个回答

这有效：

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

澄清另一个答案

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

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

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

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

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

灵感来自这篇文章：在背景中拉伸和缩放 CSS 图像 - 仅使用 CSS

其它你可能感兴趣的问题

上一篇将点添加到点云下一篇将我的 OctoPrint 连接到 Google 驱动器文件夹