When altering the opacity of a parent element I would expect all of the childrens colors to fade into the color behind the parent element, similar to how two overlapping images with the first on being transparent would show the second image through the first one. Instead the child elements fade into themselves before fading into the background creating the undesired effect in the image below. Best case scenario would be if all child elements of a VisualElement were rendered with their opacity (int his case full opacity) and then the final output of them were multiplied by the opacity of the parent element. Right now an opacity of 0.5 seems to apply 0.5 opacity to all of the children instead of only the parent.
Yes, this is a known limitation. In order to achieve one blending at the end, all the child need to be rendered to a separate render target and then be blended on top of the result. Doing so on a lot of elements would limit performance a lot as it requires extra draw call and gpu target swap.
We are currently adding part of the plumbing for achieving that but there is no eta on the feature itself.
To obtain the result you want, you could render your hierarchy on a separate render target (in the PannelSettings) and then use the resulting texture as an image. That may pose a problem if it is needed to interact with the elements: is that the case?
For now I do not need to interact with these elements. Good to know you are working on a related feature.