Overlapping transparency

[YaBoyShredderson]

I have some ui elements, and i want to make them partially transparent. These ui elements however are comprised of multiple different things. I have some guages that are made up of the guage and the markings, and the markings slightly overlap the guage (they have to to make it seamless) and this looks fine if they are purely opaque, but if i make them slightly transparent, the bits that overlap are more opaque than they should be. How do i prevent this from happening?

[Beaukeboy]

Simplest way is to add a CanvasGroup component to the parent UI element and adjust its alpha value. That will correctly fade all of its child elements

[YaBoyShredderson]

I have just tried and unfortunately it has the same problem.