I want to put text above an image. The order of my setup is as follow:
background image < rectangle shape (blur effect over image) < white text.
The rendering in the Adalo editor is fine but the displayed version when the app is shared adds opacity to the white text (don’t know why), making it less visible/readable.
Here’s how I ordered my elements and containers (groups) in the editor Tip: If you want to correctly order your elements always do it from the "screen options"
I don’t know what it is. Now, I apply opacity to the image itself over the black background. In the example you provide you are applying opacity to the color block on top. But it is a different effect that “grays out” the image, instead of getting a harsh black contrast.
Yes, what I am doing is that I am applying the opacity to the Image, not to the overlay color. Just because it provides a better effect. But Will try with a overlay color and check it out.
The workaround I found is to use a Transparency image instead of applying transparency to the rectangle. You can copy from this Adalo template: Clone Details Screen UI Kit to Jumpstart Your No Code App
They have a lot of images for this effect you can copy them into your app.