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'

  }

})

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/108273.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

苏轼在密州的四首千古名作

苏轼&#xff0c;一个从诗歌王国掉落人间的落魄贵族&#xff0c;整个政治生涯几乎都以流浪为主&#xff0c;在古诗词世界或许只有李白与之最是相似&#xff0c;不过李白的流浪属于荡歌山水、云游四方&#xff0c;而苏轼的流浪则带有被动的成分&#xff1a;一纸贬黜公文就是苏轼…

flask基础开发知识学习

之前做了一些LLM的demo&#xff0c;接口用flask写的&#xff0c;但是涉及到后端的一些业务就感觉逻辑写的很乱&#xff0c;代码变成屎山&#xff0c;于是借助官方文档和GPT迅速补了一些知识&#xff0c;总结一下一个很小的模板 于是决定边学边重构之前的代码… 文章目录 代码结…

Java SimpleDateFormat linux时间字符串转时间轴的坑

Mon Oct 16 09:51:28 2023 这是linux 的 date命令得到的时间&#xff0c;要转换称时间戳。 EEE MMM dd HH:mm:ss yyyy 这样的格式&#xff0c;看起来就是正确的&#xff0c;可是就是报错 Unparseable date: "Mon Oct 16 09:51:28 2023" 下面是正确的代码 String[…

2024年孝感市建筑类中级职称申报资料私企VS国企

2024年孝感市建筑类中级职称申报资料私企VS国企 民营企业中级职称申报跟事业单位或者是国企申报中级职称流程不一样么&#xff1f;实际上流程基本都是相同的&#xff0c;就是提交纸质版资料有点不一样。 孝感市建筑类中级职称申报基本流程 1.参加建筑类中级职称水平能力测试。 …

Javascript中字符串取数字

let str 32.12s; let intPart Math.floor(parseFloat(str)); // 输出32 let intPart Math.floor(Number(str)); // 输出NaNMath.floor函数会向下取整&#xff0c;将浮点数舍去小数部分。如果需要四舍五入的结果&#xff0c;可以使用Math.round函数 parseFloat函数从字…

本地配置免费的https咋做?

大家好这里是tony4geek。 今天和公司的小伙伴对接项目&#xff0c;因为涉及到https的权限调用。所以在服务器本地localhost 要配置https用来测试 。现在把过程中遇到的问题记录下来。 • 因为是测试用所以生成https的证书用免费的就可以了。 openssl req -x509 -nodes -days …

Spring(18) @Order注解介绍、使用、底层原理

目录 一、简介二、List 注入使用示例2.1 测试接口类2.2 测试接口实现类12.3 测试接口实现类22.4 启动类&#xff08;测试&#xff09;2.5 测试结果场景一&#xff1a;场景二&#xff1a; 三、CommandLineRunner 使用示例3.1 接口实现类13.2 接口实现类23.3 测试结果场景一&…

排序算法可视化

前言 这两天在B站上刷到一个视频&#xff0c;用python把各种排序动画可视化显示了出来觉得还蛮好玩的&#xff0c;当即就决定用Flutter写一个玩玩&#xff0c;顺便复习一下排序算法&#xff0c;话不多说&#xff0c;进入正文~ 效果图&#xff1a; 该效果图为鸡尾酒排序(双向冒…

Python 实现http server接收mutipart/form-data文件 方法2

Python 实现http server接收mutipart/form-data文件 方法2 1 Server端代码2 测试 1 Server端代码 以下代码亲测有效&#xff0c;仅适应于接收客户端上传的图片&#xff0c;其他文件未曾测试&#xff0c;作者主要应用于平时的自测工具。 说明1&#xff1a; 如有特殊需求&#x…

OpenRemote: Java 开源 IoT 物联网开发平台,匹配智慧城市、智能家居、能源管理

OpenRemote 是一个直观、用户友好的基于Java语言的开源 IoT 物联网设备管理平台&#xff0c;它包括从连接设备到构建应用程序和特定领域的智能应用程序的所有功能和特性。通过OpenRemote物联网平台&#xff0c;用户可以收集和处理来自不同设备的传感器数据&#xff0c;适用于智…

STM32学习笔记

前言 今天开始学习STM32&#xff0c;公司封闭git网络&#xff0c;所以选择CSDN来同步学习进度&#xff0c;方便公司和家里都能更新学习笔记。 参考学习资料 江科大STM32教学视频&#xff1a; 江科大自动协STM32视频_哔哩哔哩_bilibili

Java Kids-百倍提速【Mac IOS】

引言&#xff1a;当今社会&#xff0c;创新和提升效率已经成为了大家普遍的追求。无论是个人生活还是企业经营&#xff0c;我们都希望能够以更高的效率完成任务&#xff0c;节省时间和资源。因此&#xff0c;提速成为了一种时代的要求&#xff0c;而"Java Kids 百倍提速&q…

C#进阶——反射(Reflection)

定义&#xff1a;反射指的是在运行时动态地获取、检查和操作程序中的类型信息&#xff0c;而在我们的Unity中反射允许开发者在运行时通过代码来访问和修改对象的属性、方法和字段&#xff0c;而不需要提前知道这些成员的具体信息。 举一个例子&#xff0c;我们使用反射在运行的…

c++ --- 归并排序

2、归并排序 步骤&#xff1a; 选取中间点 mid (LR)/2递归排序 左边left 和 右边 right归并 ---- 将数组合二为一 模板代码 int temp[10]; void merge_sort(int q[], int l, int r) {//如果左右边界相等 直接退出if (l > r) return;//获取数组中心int mid (l r) / 2;/…

python实现批量数据库数据插入

import pandas as pd import pymysql # 连接 MySQL 数据库 conn pymysql.connect( hostlocalhost, useryour_username, passwordyour_password, databaseyour_database_name, charsetutf8mb4, ) # 读取已有数据 existing_data pd.read_csv("86w全…

Vue双向绑定原理

响应式原理 响应式是Vue的核心特性之一&#xff0c;数据驱动视图&#xff0c;我们修改数据视图随之响应更新&#xff0c;其原理是&#xff1a; ⚡️ 通过数据劫持结合发布和-订阅者模式的方式&#xff0c;通过拦截对数据的操作&#xff0c;在数据变动时发 布消息给订阅者&…

python yaml库:safe_load()(安全解析函数,解析yaml)(防止yaml文件中包含恶意代码)

文章目录 Python YAML: 使用 safe_load 进行安全解析什么是 safe_load?如何使用 safe_load?为什么选择 safe_load 而非 load? Python YAML: 使用 safe_load 进行安全解析 YAML (YAML Ain’t Markup Language) 是一种人类可读的数据序列化标准。它被广泛用于配置文件、多语言…

Element el-table 表格内容 样式错乱的问题

表格切换样式错乱展示 因为切换行的高度变化可能未异步渲染 解决方法&#xff1a; 在需要使用v-if渲染的el-table-column元素上加上一个不重复的key值即可解决问题 :key“Math.random()” <el-table-columnprop""label"问题"width"630.5px":…

day35

今日内容概要 Socket抽象层(socket编程) 基于TCP协议的借助socket可以编程客户端和服务端的程序 链接循环 通信循环 基于UDP协议的套接字(socket)编程 粘包现象 如何解决粘包现象(重要的是解决的思路) struct模块的使用(打包、解包) 今日内容详细 Socket抽象层&#x…

Selenium自动化测试总结

一、Selenium自动化测试&#xff08;基于python&#xff09; 1、Selenium简介&#xff1a; 1.1 Selenium是一款主要用于Web应用程序自动化测试的工具集合。Selenium测试直接运行在浏览器中&#xff0c;本质是通过驱动浏览器&#xff0c;模拟浏览器的操作&#xff0c;比如跳转、…