需求:
获取16进制颜色之后转换成rgba颜色,然后设置rgba参数的第四个参数,透明度,子元素则不会继承
changeBgc(color) {
//log(color) // #FF0000
let temColor = this.fromHex(color);
return {
"background-color": `rgba(${temColor.r},${temColor.g},${temColor.b} , 0.3)`,
height: "100%",
}
},
fromHex(color) {
var t = {},
bits = color.length == 4 ? 4 : 8, //如果是shorthand, #fff, 那么bits为4位, 每一位代表的个属性, 其它的为8位 每两位代表一个属性 #ffffff00
mask = (1 << bits) - 1; //表示字节占位符, 向左移4位或8位,var a = (1 << 4 ) - 1 -> 10000 - 1, a.toString(2); // 1111,或者 8位的 1111 1111
color = Number("0x" + color.substr(1)); //#ff0000 转变为16进制0xff0000;
if (isNaN(color)) {
return null; // Color
}
["b", "g", "r"].forEach(function (x) {
var c = color & mask;
color >>= bits;
t[x] = bits == 4 ? 17 * c : c; // 0xfff , 一个f应该代表 255, 应该当[0-255],按15等份划分,每一等份间隔 17。 所以获得的值需要乘以17, 才能表示rgb中255的值
});
t.a = 1;
return t; // Color
},
fromHex方法转自 https://blog.youkuaiyun.com/cexo425/article/details/40151545