前端项目发布到cdn上css被编译失效问题rgba失效和rgb失效

问题描述

CSS中background: rgba(0 0 0 / 50%)编译时会被压缩为background: #0008 0，这是由于纯黑色(0,0,0)在压缩时被简写导致。解决方法是将颜色值改为非纯黑，如rgba(1 1 1 / 50%)，这样编译后会正确转换为background: #01010180而不会被省略。透明度50%对应的十六进制值为80（127.5≈128）。

background: rgba(0 0 0 / 50%);

被编译成了

background: #0008 0;

这个问题是

先将透明度50%的background转编译成了

透明度换算表

不透明度	计算	Hex
0.1	0.1 × 255 = 25.5 ≈ 26	1A
0.2	0.2 × 255 = 51	33
0.3	0.3 × 255 = 76.5 ≈ 77	4D
0.4	0.4 × 255 = 102	66
0.5	0.5 × 255 = 127.5 ≈ 128	80
0.6	0.6 × 255 = 153	99
0.7	0.7 × 255 = 178.5 ≈ 179	B3
0.8	0.8 × 255 = 204	CC
0.9	0.9 × 255 = 229.5 ≈ 230	E6

background: #00000080;

其他的透明度都可以使用，唯独这个50%会有这个问题

如何解决

不要使用0，0，0，这样就不会被压缩成background: #0008 0;

background: rgba(0 0 0 / 50%);

使用

background: rgba(1 1 1 / 50%);

这样他转编译压缩后会被压缩成 background: #01010180;这样就不会出现压缩被省略的问题