问题描述
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;这样就不会出现压缩被省略的问题