react动态添加背景图片/不同内容添加对应背景

最新推荐文章于 2024-02-23 15:36:59 发布

阿湫

最新推荐文章于 2024-02-23 15:36:59 发布

阅读量2.6k

点赞数 1

分类专栏： React学习文章标签：前端开发样式设置背景图片图片资源内容定制

本文链接：https://blog.csdn.net/qq_51247028/article/details/125812413

版权

React学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在项目中有这样的需求，需要为不同类型的内容添加对应的背景图。
效果如下：
在这里插入图片描述

主要代码：
首先在全局定义一个内容为图片名字的数组，然后在需要图片的地方，通过id作为下标取得对应图片名字，
再拼接路径去获取图片资源。

var backgroundimage = ["bg1.png", "bg2.jpg", "weipay1.png"];
style={{ 
   backgroundImage: `url(${"./pic/" + backgroundimage[item.userLevelId - 1]})`,
}}

完整代码：

 <div maxWidth={1000}>
    <List
        style={{ zIndex: 1 }}
		split='false'
		grid={{
			xs: 1, sm: 1, md: 2,
			lg: 2, xl: 2, xxl: 2,
		}}
		dataSource={paydata}
		renderItem={item => (
			<List.Item >
                <div style={{ minWidth: '700px' }}>
                    <Row>
						<Col xs={24} md={24} xl={24} >
							<div onClick={() => this.pay(item.userLevelId)}
								style={{
									height: 200, width: 400, float: 'left',
									backgroundImage: `url(${"./pic/" + backgroundimage[item.userLevelId - 1]})`,
									backgroundSize: 'cover', backgroundPosition: 'center', overflow: 'hidden'
								}}
								className="paytype" >
								<div style={{ display: 'flex', alignItems: 'center', height: 150 }}>
									<div style={{ color: 'white' }}>
										<div style={{ fontSize: '45px', marginTop: '70px', textAlign: 'center' }}>
											<span style={{ letterSpacing: '20px', textAlign: 'center' }}>{item.userLevelName}会员</span>
										</div>
										<div style={{ fontSize: '15px' }}>
											<p style={{ textAlign: 'center', }}>  会员描述{item.userLevelDescribe} </p>
										</div>
										<div style={{ fontSize: '15px', width: 400, height: '70px', textAlign: 'center', background: 'rgb(0,0,0,0.2)' }} className="choose"><br />										
											费用： {item.userLevelCeo / 100}&nbsp;元
										</div>
								    </div>
								</div>
							</div>
						</Col>
                    </Row>
                </div>
            </List.Item>
        )}
    />
</div>