Taro 小程序引入背景图片的方式

小程序用css外部文件设置本地背景图片会获取不到，可以通过下面两种方法设置背景图片：
一、通过js文件设置背景图片
1、在js文件中引入背景图片

import HomeBg from '@assets/images/home-bg.jpg'

2、在需要设置背景图片的View上面设置样式

<View style={{backgroundImage:`url(${HomeBg})`}}>
  ...
</View>

二、通过图片绝对定位设置背景图片
js文件：

<Image className='home-bg'/>
<View className='home-content'>
  ...
</View>

scss文件：

.home-bg {
  position: absolute;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  background: url('../../assets/images/home-bg.jpg') no-repeat;
  background-size: cover;
}
.home-content {
  position: relative;
  z-index: 2;
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容