
在设计网页时,我们使用颜色使网页更具吸引力和吸引力。我们通常使用十六进制代码来表示颜色,但有时我们需要为颜色添加透明度,这可以通过 RGBA 值来实现。
十六进制颜色值由#RRGGBBAA表示,RGBA颜色值由rgba(red, green, blue, alpha)。以下是 RGBA 和十六进制值的一些示例 -
Input: #7F11E0 Output: rgba( 127, 17, 224, 1 ) Input: #1C14B0 Output: rgba( 28, 20, 176, 1 )
在本文中,我们将讨论使用 Javascript 将 Hex 转换为 RGBA 的多种方法。
-
使用parseInt和String.substring方法
立即学习“Java免费学习笔记(深入)”;
使用数组解构和正则表达式
使用 ParseInt 和 String.substring 方法
parseInt() 函数接受两个参数:一个表示数字的字符串和一个表示基数的数字。然后它将字符串转换为指定基数的整数并返回结果。
String.substring 方法用于通过获取开始和结束位置来提取字符串的某些部分。
要将 HEX 转换为 RGBA,我们使用以下步骤。
保留 # 并使用 String.substring 方法逐个提取十六进制字符串的一对两个字符。
提取后,使用 parseInt 方法将每对转换为整数。我们知道这些对是十六进制代码,因此我们需要将 16 传递给 parseInt 的第二个参数。
将每对十六进制代码转换为整数后,将其连接成 RGBA 格式。
示例
在此示例中,我们将十六进制代码转换为 RGBA。
Convert Hex to RGBA value using JavaScript Converting Hex to RGBA value parseInt() and String.substring() methods
Hex Value:
RGBA Value:
使用 Array.map() 和 String.match() 方法
Javascript 数组 map() 方法创建一个新数组,其中包含对该数组中每个元素调用所提供函数的结果。
String.match 方法用于在将字符串与正则表达式匹配时检索匹配项。
要将 HEX 转换为 RGBA,我们使用以下步骤。
使用 /\w\w/g 正则表达式和 String.match 方法匹配十六进制字符串的两个连续字母数字字符的每个序列。
您将在数组中获得三对字母数字字符,并使用 Array.map 和 parseInt 方法将这些字符转换为整数。
示例
在此示例中,我们将十六进制代码转换为 RGBA。
Converting Hex to RGBA value using JavaScript Convert Hex to RGBA value using Array.map() and String.match() methods
Hex:
RGBA:











