想省略过程，只看效果，可以直接拉到最后“在线转换小工具”。
场景简述
有的时候，会有这样一个场景：一个区域(背景白色)内有很多个方块，每个方块都有自己的背景色(有透明度的背景色)；但是某一天这个区域也有了自己的颜色，那么方块的颜色就会透过去，不再是之前的颜色效果了。
这个时候，就需要将这个有透明度的色值，转换为没有透明度的色值。我总结了一个方法，只需要三步就能搞定：前提，原色值是 rgba 的
- 取相对值（就是拿 255 减去每一个值）。
(255 - value) - 乘以透明度值，取整。
(255 - value) * alpha - 再取相对值，就成为 rgb 的颜色了。
255 - ((255 - value) * alpha)
例如：
| 原色值 (rgba) | 取相对值 | 乘以透明度，取整 | 取相对值，无透明度 |
|---|---|---|---|
| rgba(255, 173, 69, 0.1) | 0, 82, 186 | 0, 8, 19 | rgb(255, 247, 236) |
| rgba(46, 158, 255, 0.1) | 209, 97, 0 | 21, 10, 0 | rgb(234, 245, 255) |
| rgba(102, 66, 221, 0.1) | 153, 189, 34 | 15, 19, 3 | rgb(240, 235, 252) |
| rgba(46, 158, 255, 0.35) | 209, 97, 0 | 73, 34, 0 | rgb(182, 221, 255) |
截图示例
初版
外部区域加了背景色后
将透明色值转换为不透明色值后
延伸思考
上面的计算方式是基于白色背景(rgb(255, 255, 255))的颜色叠加，如果初始背景色不是白色呢？步骤如下：
- 初始背景: (255 - bgVal) * (1 - alpha)
- 取相对值。
- 乘以（1- 透明度值），取整。
- 原色值: (255 - value) * alpha
- 取相对值。
- 乘以透明度值，取整。
- 最终结果: 255 - [ (255 - bgVal) * (1 - alpha) + (255 - value) * alpha ]
- 将计算后的背景色值 + 原生值
- 再取相对值，就成为 rgb 的颜色值了。
例如：
| 初始背景 (rgb) | 原色值 (rgba) | 初始背景结果 | 原色值结果 | 最终结果 |
|---|---|---|---|---|
| rgb(255, 255, 255) | rgba(102, 66, 221, 0.1) | 0, 0, 0 | 15, 19, 3 | rgb(240, 235, 252) |
| rgb(0, 0, 0) | rgba(102, 66, 221, 0.75) | 64, 64, 64 | 115, 142, 26 | rgb(76, 49, 165) |
| rgb(32, 32, 32) | rgba(102, 66, 221, 0.75) | 56, 56, 56 | 115, 142, 26 | rgb(84, 57, 173) |
在线转换小工具 {#tools}
如果觉得自己去计算一遍还是挺麻烦的，我做了一个在线的转换器，请各位移步去体验一下。
在线转换器：转换为无透明度
