本文主要是介绍CSS Vue/RN 背景使用opacity，文字在背景上显示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Vue
<div class="training_project_tip">
<div class="tip">展示的文字</div>
</div>
.training_project_tip {
font-size: 12px;
font-weight: 400;
text-align: left;
color: #ffffff;
margin-top: 8px;
position: relative;
display: flex;
border-radius: 6px;
padding: 6px 8px;
}
.training_project_tip::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ffffff;
opacity: 0.15;
border-radius: 6px;
}
RN
<View style={style.content}>
<View style={style.projectTip}>
<View style={style.tipBackground} />
<View style={style.iconContainer}>
<IconFont name={'cache_hint'} color={'#fff'} size={12} />
</View>
<View style={style.tip}>
<Text style={style.tipName}>
{$t('pc_train_not_allow_tip')}
</Text>
</View>
</View>
</View>
const style= StyleSheet.create({
content: {
paddingHorizontal: 16,
color: Colors.white
},
projectTip: {
flexDirection: 'row',
alignItems: 'center',
marginTop: 8,
paddingVertical: 6,
paddingHorizontal: 8,
},
tipBackground: {
...StyleSheet.absoluteFillObject,
backgroundColor: '#ffffff',
opacity: 0.15,
borderRadius: 6
},
iconContainer: {
zIndex: 1
},
tip: {
marginLeft: 4
},
tipName: {
color: '#fff',
fontSize: 12,
fontWeight: 'bold'
}
})
这篇关于CSS Vue/RN 背景使用opacity，文字在背景上显示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
