当前位置: 首页 > news >正文

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,文字在背景上显示

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; dis…...

vue3自定义指令批量注册

第一步、在src目录下新建directives文件文件夹 用来存放不同的指令&#xff0c;以dbounce指令为例&#xff1a; 第二步、在directives目录下创建debounce.js文件&#xff0c;文件内容如下&#xff1a; // 防抖 const debounceClick {mounted(el, binding) {let timerel.addE…...

山西电力市场日前价格预测【2023-10-18】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2023-10-18&#xff09;山西电力市场全天平均日前电价为348.72元/MWh。其中&#xff0c;最高日前电价为505.50元/MWh&#xff0c;预计出现在18: 00。最低日前电价为288.10元/MWh&#xff0c;预计…...

2-k8s-控制器介绍

文章目录 一、控制器类型二、Deployment控制器三、SatefulSet控制器四、Daemonset控制器五、Job控制器六、CronJob 控制器 一、控制器类型 Deployment&#xff1a;适合无状态的服务部署StatefullSet&#xff1a;适合有状态的服务部署DaemonSet&#xff1a;一次部署&#xff0c…...

【数据结构】二叉树--OJ练习题

目录 1 单值二叉树 2 相同的树 3 另一颗树的子树 4 二叉树的前序遍历 5 二叉树的最大深度 6 对称二叉树 7 二叉树遍历 1 单值二叉树 965. 单值二叉树 - 力扣&#xff08;LeetCode&#xff09; bool isUnivalTree(struct TreeNode* root) {if (root NULL){return true;}…...

时间复杂度为 O(n^2) 的排序算法

大家好&#xff0c;我是 方圆。对于小规模数据&#xff0c;我们可以选用时间复杂度为 O(n2) 的排序算法&#xff0c;因为时间复杂度并不代表实际代码的执行时间&#xff0c;而且它也省去了低阶、系数和常数&#xff0c;仅代表的增长趋势&#xff0c;所以在小规模数据情况下&…...

ES6 Map数据结构

1.Map是什么&#xff1f; ES6 提供的另一种新的引用类型的数据结构 它类似于对象&#xff0c;也是键值对的集合&#xff0c;但是“键”的范围不限于字符串&#xff0c;各种类型的值&#xff08;包括对象&#xff09;都可以当作键&#xff09; 以前引用类型中的对象也是键值对…...

网页数据采集HTTP Get,Post登录提交数据--VBS之Microsoft.XMLHTTP对象

MSXML中提供了Microsoft.XMLHTTP对象&#xff0c;能够完成从数据包到Request对象的转换以及发送任务。 创建XMLHTTP对象的语句如下&#xff1a; Set objXML CreateObject("Msxml2.XMLHTTP") 或 Set objXML CreateObject(“Microsoft.XMLHTTP”) Or, for version 3…...

强化科技创新“辐射力”,中国移动的数智化大棋局

作者 | 曾响铃 文 | 响铃说 丝滑流畅的5G连接、每时每刻的数字生活服务、无处不在的智能终端、拟人交流的AI助手、梦幻般的XR虚拟现实、直接感受的裸眼3D…… 不知不觉&#xff0c;那个科幻片中的世界&#xff0c;越来越近。 数智化新世界的“气氛”&#xff0c;由一个个具…...

喜报 | 擎创科技实力亮相2023科创会并荣获科技创新奖

近日&#xff0c;由国家互联网数据中心产业技术创新战略联盟&#xff08;NIISA&#xff09;主办的“2023第二届国际互联网产业科技创新大会暨互联网创新产品展览会”于北京圆满落幕。 擎创科技副总裁冯陈湧受邀出席本次论坛&#xff0c;并发表了“银行分布式核心智能运维体系思…...

vue3学习(九)--- keep-alive缓存组件

有时候我们不希望组件被重新渲染影响使用体验&#xff1b;或者处于性能考虑&#xff0c;避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。 keep-alive有两个独有的生命周期&#xff1a;activated、 deactivated 接下来看…...

用servlet实现一个简单的猜数字游戏。

需要两个页面&#xff0c;一个jsp页面&#xff08;guess.jsp&#xff09;和servlet页面&#xff08;servlet&#xff09;。 一.jsp页面 在jsp页面中需要实现&#xff1a; 1.创建随机数并且保存在session中。 2.做个form表单提交猜的数字给servlet页面。 <%page import&…...

前端取消请求

取消请求 发送一个异步请求获取数据&#xff0c;并在控制台中打印出返回结果。这里使用了 fetch 方法来发送请求&#xff0c;同时使用 AbortController 对象来实现请求的取消操作。 具体来说&#xff0c;代码中定义了一个 list 函数&#xff0c;该函数会创建一个 AbortContro…...

关于6轴球腕机械臂的肩部奇异描述纠正

对于常见的球腕6轴机械臂构型&#xff0c;在大多数资料中奇异点描述如下&#xff1a; 肩部奇异点&#xff08;Shoulder singularity&#xff09;&#xff1a; 肩部奇异点是在机器人手腕的中心与J1轴关节在同一条直线上时发生。这种情况下&#xff0c;会导致关节轴1和4试图瞬间旋…...

Python —— hou.Node class

Houdini内所有节点&#xff08;Object、SOP、COP等&#xff09;的基类&#xff0c;该类的实例对应houdini内的节点&#xff1b; 每个节点都有一个唯一的路径&#xff08;定义其在节点树内的位置&#xff09;&#xff1b;节点路径层次结构类似于文件系统中的文件和文件夹的层次结…...

MATLAB——RBF、GRNN和PNN神经网络案例参考程序

欢迎关注“电击小子程高兴的MATLAB小屋” %————RBF程序实例 %% I. 清空环境变量 clear all clc %% II. 训练集/测试集产生 %% % 1. 导入数据 load spectra_data.mat %% % 2. 随机产生训练集和测试集 temp randperm(size(NIR,1)); % 训练集——50个样本 P_train NIR(t…...

E138: Can‘t write viminfo file

E138: Can’t write viminfo file /home/xxx/.viminfo! 原因 进入/home/xxx/目录下&#xff0c;用ls -a你会发现有很多.viminfa.tmp - .viminfz.tmp 这种的临时文件&#xff0c;这是因为使用vim编辑器时&#xff0c;如果编辑器没有正常退出就会生成一个暂存文件&#xff0c;…...

Compose Canvas基础(2) 图形转换

Compose Canvas基础&#xff08;2&#xff09;图形转换 前言平移 translate缩放 scale旋转 rotate自定义绘图区域及绘制内边距inset组合转换 withTransform完整代码总结 上一篇文章 Compose Canvas基础&#xff08;1&#xff09; drawxxx方法 前言 阅读本文需要一定compose基…...

【计算机网络笔记】分组交换中的报文交付时间计算例题

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 系列文章目录题目解答 题目 在下图所示的采用“存储-转发”方式的分组交换网络中所有链路的数据传输速率为100 Mbps&#xff0c;分…...

JVS-rules规则引擎,解决大数据风控的自动化决策利器

规则引擎中的评分卡节点是一种用于评估客户信用、风险等级或其他指标的重要工具。它通常用于金融、信贷等领域&#xff0c;以便根据一系列预定义的规则和权重来对客户进行评分。以下是评分卡节点的主要功能、作用以及配置方式的介绍&#xff1a; 功能和作用&#xff1a; 评估…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...