0
221
ViewsTransparent background overlapping
I have a simple view like this:
<View style={{backgroundColor:'rgba(82, 82, 82, 0.8)',position:'absolute',left:0,width:100,height:100}}></View>
<View style={{backgroundColor:'rgba(82, 82, 82, 0.8)',position:'absolute',left:50,width:100,height:100}}></View>
but the overlap produces a color of it's own like this:
how do I make them both be only transparent towards the background and not overlap the transparency ?
1 answers
Answer question0
You either don't have transparency, or you don't overlap the views. Overlapping transparent views will always show whatever was behind the front views.
There is no magic way to tell a view in front to use its transparency and ignore any transparency behind. This is because the views are drawn back to front. So by the time the front view renders its transparency, then everything behind it is already drawn and finalized.
This is like overlapping a yellow plastic film and a green plastic film, and asking how can light can only go through the green one. That's just... not how it works.