html背景颜色透明度hex,CSS背景颜色设置透明度的两种方法（8位hex和rgba）

目录

一、 6位HEX转RGBA

二、8位HEX

在写微信小程序的时候，有个需求是按背景颜色

background-color要设透明度0.85，让背景图片

background-image透一点出来，而且

background-color的值是后端传过来的动态数据，背景颜色动态改变，UI同学给的数据全是6位HEX，需要我自己设置透明度。

设置透明度首先会想到用opacity，但 opacity 会把被设置的元素及其子元素同时设置为同一个透明度，我需要子元素不透明，opacity就不能用了。

接下来讲两个实际可用性比较高的方法，以下两种方法都在chrome和微信小程序上亲测可用：

一、 6位HEX转RGBA

rgba的alpha值可以设透明度而不影响子元素。但是UI同学给的几百个数据都是6位hex，所以需要我自己手动把6位hex格式转成rgb格式，再加上alpha值0.85写成rgba(x, x, x, 0.85)。

其实hex转rgb就是十进制转十六进制，最简单的办法就是用JS原生的parseInt() 函数帮我们做转换。以下是MDN文档对parseInt的说明：

parseInt(string, radix) 将一个字符串 string 转换为 radix 进制的整数， radix 为介于2-36之间的数。

…

如果 radix 是 undefined、0或未指定的，JavaScript会假定以下情况：

如果输入的 string以 "0x"或 “0x”(一个0，后面是小写或大写的X)开头，那么radix被假定为16，字符串的