CSS Vue/RN 背景使用opacity，文字在背景上显示

gaolei_eit

已于 2023-10-17 16:15:32 修改

阅读量381

点赞数

分类专栏： CSS 文章标签：前端 css

于 2023-10-16 11:44:57 首次发布

本文链接：https://blog.csdn.net/weixin_39428080/article/details/133855238

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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;

}

<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'

}

})