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

Vue 

 

       

展示的文字

 

.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

         

           

           

             

           

           

             

                {$t('pc_train_not_allow_tip')}

             

           

         

       

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'

  }

})