如何让重叠的半透明View仅对底层背景透明，不叠加透明度

你遇到的重叠区域颜色加深问题，是因为两个半透明视图渲染时会依次和下层图层做透明度混合：第一个半透明View先和底层背景混合，第二个半透明View再和已经混合了第一个View的下层图层做二次混合，最终重叠区域的实际透明度等于两个视图透明度的乘积（0.8*0.8=0.64），所以颜色会更深。

方案1：父容器统一控制透明度（首选，全场景兼容） #

将两个View放在同一个父容器内，仅对父容器设置整体透明度，子View使用不透明的纯色背景，即可避免子View之间的透明度叠加，仅整体对底层背景表现出统一的半透明效果。
代码示例：

<View style={{ opacity: 0.8, position: 'relative' }}>
  <View style={{backgroundColor: 'rgb(82, 82, 82)', position: 'absolute', left: 0, width: 100, height: 100}}></View>
  <View style={{backgroundColor: 'rgb(82, 82, 82)', position: 'absolute', left: 50, width: 100, height: 100}}></View>
</View>

该方案无额外性能损耗，兼容Web、React Native、小程序等所有端的渲染规则。

方案2：绘制合并后的单一形状 #

如果两个View无法被同一个父容器包裹，可以直接绘制两个矩形合并后的整体形状，再对整体形状设置半透明填充：

• Web场景：用SVG的<path>标签绘制合并后的矩形路径，填充rgba(82, 82, 82, 0.8)即可
• React Native场景：借助react-native-svg库绘制合并路径，或用Canvas API直接渲染整体图形
• 原生端场景：用系统提供的画布API绘制合并路径后填充半透明色

方案3：图层混合模式（仅特殊场景使用） #

部分端支持自定义图层混合规则，可通过给上层View设置对应混合模式，避免和下层同色半透明View叠加透明度，该方案适配性有限，仅作为备选。

内容的提问来源于stack exchange，提问作者user15573857