Question

背景图像不是单个文件，而是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链接以获取有关弹性版式的更多信息。

如何设置一个包含许多图像的div作为背景？

1 个答案: