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

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

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

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

完整代码：

 <div maxWidth={1000}><Liststyle={{ 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>

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

java添加背景图片_Java怎么添加背景图片
首先,导入相关的包: import java.awt.BorderLayout; import java.awt.Container; import javax.swing.ImageIcon; im ...
css只设置背景图片半透明,css3实现背景图片半透明内容不透明的方法示例
上一个博客做登陆的页面是遇到的问题,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧. 效果展示: 内容半透明内容不透明最常见的做法事设置元素的opacity,这种设置 ...
css3实现背景图片半透明内容不透明的方法
css实现背景图片半透明内容不透明的方法上一个博客做登陆的页面是遇到的问题,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧. 效果展示: 内容半透明内容不透明最常见 ...
php背景图片透明度,css实现背景图片半透明内容不透明代码分享
本文主要和大家介绍了纯css实现背景图片半透明内容不透明的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家. 最近做一个登陆界面的,突然想使用这种背景图片透明,而内容不透明的 ...
Html设置背景图模糊,CSS设置背景图片模糊内容不模糊的解决方法
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置, ...
css背景图不失真_CSS实现页面背景图片模糊内容不模糊的方法
CSS实现页面背景图片模糊内容不模糊的方法,如果对你有帮助就看看吧,挺实用的一个CSS背景模糊效果,适合做一些非常唯美的网页,给人一种很模糊却又带着一丝清晰的感觉. 代码: Document .ban ...
设置背景图片，解决手机上背景图片高度适应问题
设置背景图片,解决手机上背景图片高度适应问题第一种方法:直接对图片进行设置,代码如下 <img src="url" class="PhoneBack"& ...
CSS背景图片定位(background-position,css sprit,背景定位,background-imag
CSS背景图片定位(background-position,css sprit,背景定位,background-imag 标签: 杂谈分类: css 在CSS中,背景图片的定位方位有3种: 1)关键 ...
c语言mfc怎么插入背景图片,MFC 对话框添加背景图片详细过程（两种方法）
给对话框添加背景图片方法很多,在此贴出两种很常见的方法.一种是通过读取位图资源显示位图(BitMap) step: 1.创建内存设备上下文: 2.选择位图,将其装入内存设备上下文: 3.使用BitBl ...
html背景图片css怎么添加,css样式怎么插入背景图片？
css样式怎么插入背景图片?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在css中,给html元素添加背景图,主要通过background-image ...

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

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

最新文章

热门文章