html - 如何将包含许多图像的div设置为背景？

Question

This is the motive

背景图片不是一个单独的文件，而是在一个div标签内捕获的许多缩略图的集合

代码:

import React, { Component } from 'react';

class Background extends Component{
constructor(props){
    super(props)
    this.state={pictures:[]}
}
componentDidMount(){
    fetch('https://randomuser.me/api?results=300')
    .then(results=>{
        return results.json();
    }).then(data=>{
        let pictures=data.results.map((pic)=>{
            return(
                <span key={pic.login.uuid}>
                    <img src={pic.picture.medium} alt=''/>
                </span>
                )
        })
        this.setState({pictures:pictures})
    })
}

render(){
    return(
            <div className="Container1">
            {this.state.pictures}
            </div>
        )
}
}

export default Background;

对于 Container1 类和具有主要内容的 app 类，我的 css 应该如何设置？

Answer 1

以下链接会有所帮助: https://www.webucator.com/how-to/how-use-multiple-background-images-with-css.cfm

另一种解决方案是创建一个 css flex 容器 并为您的 pictures 数组的每个图像动态创建一个元素。

检查 this有关 flex 布局的更多信息的链接。