JS根据颜色值和透明度获取带透明度的背景

在设置背景的时候,有时需要先选颜色值,然后再调整透明度,但却又不能影响文字透明度(功能类似简单封面EasyCover (jiandan.link)),此时可以将颜色值(线性颜色或者十六进制颜色)和透明度作为参数,然后处理成rgba的格式。

function convertGradientsToRgba(gradients, opacity) {// 修改后的正则表达式以匹配多重渐变和多个色标const gradientRegex = /(linear-gradient\(([^,]+?)(?:,(?:\s*rgba?\([^)]+\)|\s*#(?:[0-9A-Fa-f]{3}){1,2})\s*(?:[0-9]{1,3}%?)?)*\))/g;let match;let outputGradient = [];// 匹配每个渐变,并分别处理while ((match = gradientRegex.exec(gradients)) !== null) {const gradientDeclaration = match[0];// 分离渐变类型和颜色并将每个颜色转换为rgbaconst colorsRegex = /(rgba?\([^)]+\)|#(?:[0-9A-Fa-f]{3}){1,2})\s*(?:[0-9]{1,3}%?)?/g;let colorMatch;let gradientColors = [];while ((colorMatch = colorsRegex.exec(gradientDeclaration)) !== null) {let color = colorMatch[0];if (!/^rgba/.test(color)) {// 只转换非rgba颜色color = convertHexToRgba(color, opacity);} else {// 更新存在的rgba颜色的透明度color = updateRgbaOpacity(color, opacity);}gradientColors.push(color);}// 用转换后的颜色值替换原有颜色const newGradient = gradientDeclaration.replace(colorsRegex, () => gradientColors.shift());outputGradient.push(newGradient);}// 将所有的渐变合并return outputGradient.join(', ');
}function convertHexToRgba(hex, alpha) {if (!/#/.test(hex)) { return hex; }const hexColor = hex.trim().replace('#', '');const r = parseInt(hexColor.substring(0, 2), 16);const g = parseInt(hexColor.substring(2, 4), 16);const b = parseInt(hexColor.substring(4, 6), 16);return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}function updateRgbaOpacity(rgba, alpha) {return rgba.replace(/rgba?\(([^,]+), ([^,]+), ([^,]+),?[^)]*\)/, `rgba($1, $2, $3, ${alpha})`);
}

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

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

相关文章

数据结构 / 结构体位域

结构体位域充分利用把结构体字节,以bite为单位。例如:存储性别,可以使用二进制0或1表示 1. 格式 struct 结构体位域名 { 数据类型 位域名:位域大小; ...... }; 结构体位域名:满足命名规范数据类型:不可…

AIGC系列之:DDPM原理解读(简单易懂版)

目录 DDPM基本原理 DDPM中的Unet模块 Unet模块介绍 Unet流程示意图 DownBlock和UpBlock MiddleBlock 文生图模型的一般公式 总结 本文部分内容参考文章:https://juejin.cn/post/7251391372394053691,https://zhuanlan.zhihu.com/p/563661713&…

03 项目运行

前面两篇文章对项目架构+源码架构做了分析,这篇文章先将服务部署一下,能够让大家有个直观的感受。 组件资源 项目运行的各种组件已经为你准备好了,有需要的直接百度云盘下载: 链接:https://pan.baidu.com/s/1hN6qf20gamMHPmA_qXwsLg提取码:o4k9MySQL数据库创建 找到的…

2023年最新Dev-C++下载安装以及C语言环境搭建教程(C语言入门)

文章目录 写在前面C语言简介Dev-C简介Dev-C下载安装Dev-C使用教程 写在后面 写在前面 2023年最新Dev-C下载安装以及C语言环境搭建教程,快来看看吧! C语言简介 C语言是一种通用的高级程序设计语言,由美国计算机科学家Dennis Ritchie于20世纪…

51单片机的智能窗帘系统【含proteus仿真+程序+报告+原理图】

1、主要功能 该系统由AT89C51单片机LCD1602显示模块DS18B20温度模块DS1302时间模块光敏传感器步进电机蓝牙等模块构成。适用于智能窗帘、智能门窗家具等相似项目。 可实现基本功能: 版本一: 1、LCD1602实时显示北京时间、环境温度、光照强度、手动/自动控制等信息…

什么是磁矩?磁矩与磁通的关系

物质的磁性来源于原子中的电子磁矩 物质由原子构成,而原子是由原子核和电子组成的。在原子中,电子因绕原子核运动而具有轨道磁矩;电子因自旋具有自旋磁矩,原子的磁矩主要来源于电子磁矩,这是一切物质磁性的来源。 磁…

Golang 设置运行的cpu数与channel管道

介绍:为了充分了利用多cpu的优势,在Golang程序中,设置运行的cpu数目。 func main() {//获取系统当前cpu的数量num : runtime.NumCPU()//这里根据需求来设置整个go程序去使用几个cpuruntime.GOMAXPROCS(num)fmt.Println("num ", nu…

kafka集群环境部署

文章目录 1 Kafka集群2 搭建两台服务器2.1 zookeeper部署2.2 启动1号机器的broker2.3 启动2号机器的broker2.4 查看kafka集群2.5 测试集群 1 Kafka集群 2 搭建两台服务器 2.1 zookeeper部署 zookeeper先只部署一台,在1号机器(192.168.11.59)…

图解系列--Http

1.URI和URL 1.1.URL URL是统一资源定位符。URL正是使用 Web 浏览器等访问 Web 页面时需要输入的网页地址。比如,http://hackr.jp/就是 URL。 1.2.URI 统一资源标识符。 URI 用字符串标识某一互联网资源,而URL表示资源的地点(互联网上所处的位…

C语言标准

1、概述 C语言标准是由ANSI(美国国家标准协会)和ISO(国际标准化组织)共同制定的一种语言规范。标准经历过如下更新: C89/C90标准C99标准C11标准C17标准 2、C89/C90标准 (1)这是1989年正式发布的C语言标准&#xff0…

windows下cef源码下载和编译

脚本源码:GitHub - sway913/cef_build: build cef source 1、源码下载 2、编译 3、遇到的问题 1、RuntimeError: requested profile "D:\code\chromium_git\chromium\src\chrome\build\pgo_profiles\chrome-win64-5414-1673458358-5348276ff887eb95bb837c1dd06e9efed673b…

MySQL安装部署-8.0.33-rpm

一、背景 熟悉MySQL (8.0.35) 的以RPM的方式安装部署,并解决安装过程中所碰到的问题。 二、目标 熟悉MySQL (8.0.33) 的以RPM的方式安装部署,并解决安装过程中所碰到的问题。 三、过程 3.1 操作系统初始化 具体内容可见,区域化数据库操作系统初始化 1)检查和设置网卡…

成都爱尔樊映川院长讲解常见眼底病有哪些

一提到“眼底”这个眼科常用词汇,许多非医疗行业人士认为在眼球下方,其实不然,那眼底在哪呢?眼底其实是眼球内后部的组织,即眼球的内膜——视网膜、视乳头、黄斑和视网膜中央动静脉。 眼底病是一种病种繁多,病因复杂&…

C++学习之路(五)C++ 实现简单的文件管理系统命令行应用 - 示例代码拆分讲解

简单的文件管理系统示例介绍: 这个文件管理系统示例是一个简单的命令行程序,允许用户进行文件的创建、读取、追加内容和删除操作。这个示例涉及了一些基本的文件操作和用户交互。 功能概述: 创建文件 (createFile()): 用户可以输入文件名和内…

设计模式:观察者模式

观察者模式是一种设计模式,也被称为 "发布-订阅"模式。这种模式在需要维持一致状态的对象之间建立一个依赖关系时非常有用。 想象一下这样的场景:你正在追一部电视剧,每当有新的一集播出时,你都希望能得到通知。在这个…

Hiera实战:使用Hiera实现图像分类任务(一)

文章目录 摘要安装包安装timm 数据增强Cutout和MixupEMA项目结构计算mean和std生成数据集_pickle.PicklingError: Cant pickle <function Head.<lambda> at 0x000001DE8DD7F240>: attribute lookup Head.<lambda> on hiera.hiera failed 摘要 现代层次视觉变…

Vue组件的几种通信方式

这里写目录标题 Vue组件的几种通信&#xff08;数据传递&#xff09;方式非父子组件间通信&#xff08;Bus事件总线&#xff09;介绍实例 非父子通信-provide&inject1.作用2.场景3.语法4.注意 父子组件间的通信固定props属性名&#xff08;v-model&#xff09;介绍实例 不固…

vue页面表单提交时如何做校验

我们在做新增的时候&#xff0c;新增对话框是要加必填校验的&#xff0c;否则就可能会加空数据或者会产生sql的报错。那么这个校验是如何加的呢&#xff1f;下面我们来说一下。 文章目录 一、必填校验1.1 给form表单绑定一个:rules校验规则&#xff0c;给每个item加上一个prop…

harmony 鸿蒙页面路由错误码

页面路由错误码 说明&#xff1a; 以下仅介绍本模块特有错误码&#xff0c;通用错误码请参考通用错误码说明文档。 100001 内部错误 错误信息Internal error.错误描述当出现了开发者解决不了的内部异常错误&#xff0c;系统会产生此错误码&#xff0c;并描述具体是哪种内部错…

api自动化测试

API测试已成为日常的测试任务之一&#xff0c;为了提高测试效率&#xff0c;减少重复的手工操作&#xff0c;API自动化测试也逐渐变得愈加重要&#xff0c;本文是自己在API自动化测试方面的一些经验积累和心得、汇总成文&#xff0c;以飨读者 我相信自动化技能已经成为高级测试…