需求在一个大图片上,对应的位置贴上一个小图片,打算用relative和absolute方式实现。但是发现image标签上无法加载出image标签
所以才用外层view,view引入背景图,在view上贴图片
<View className='home-top-bg-img' style={{ backgroundImage: `url(${hometop})`, backgroundSize: '100% 100%' }}>
<Text className="app-title">title</Text>
<Image className='locationImg' src={location}></Image>
</View>
css代码
.home-top-bg-img {
position: relative;
height: 520px;
width: 100vw;
.app-title {
position: absolute;
top: 56px;
left: 60px;
display: block;
font-size: 60px;
color: #FFFFFF;
font-weight: 600;
}
.locationImg{
position: absolute;
top: 200px;
left: 50px;
width: 100px;
height: 32px;
background-color: red;
}
}
效果如下
可以看到红色的location加到了 大的图片上