this is driving me nuts
I edited the CSS I used the properties and all I get is this weird behavior
I want to have an invisible (opacity 0) block on top of a normal block
I don’t want the components to be invisible but a little transparent (opacity 0.5)
why the block in third image (opacity 0) cut out the block below it ? how can I keep the invisible block
this is the desired effect
Hi @Ali_AlShamsi ,
Could you please provide your app ID and names of the container and page where you got this problem?
Regards, Andriy
6C7160BB-E538-D8BE-FFDF-F9AA39FD0C00
test page
you will see the blocks there
Hello @Ali_AlShamsi!
This is standard behavior for nested elements. The property opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements.
To achieve the desired result, you should probably change the block structure or set opacity only for certain elements.
Here you can learn more about how this css property works:
I also want to remind you that this forum is designed to help people solve problems related solely to Backendless.
Regards,
Alexander
Thanks for the pointer. I thought the block is a custom type of element you had in backendless.
Anyways for the poor souls like me who need to get the same effect
1- give the block an ID or class name in my case I gave it a class name
so that difference is in when you call it in CSS .classname or #IDname
in the theme editor
2- the z-index property the higher value the higher the item will be on the stack so think of it like stack of papers on top each other the highest z index is first page on top of the stack and lowest is last
3- for index to work you have to set the position to (position: absolute, position: relative, position: fixed, or position: sticky) otherwise it wont work
4- do not set the opacity for the block otherwise all items in it will have the same opacity and they will all be transparent just like the block. if you want that then use opacity else
5- use the background color and RGPA color to set transpancy only the block the items will be whatever opacity or color you originally set them for
here is example CSS where I have 2 blocks classes one is on top of the other and the top one is transparent and its items are not
.TopBlock {
position: absolute;
z-index: 10;
// notice the last 0 in the rgba this for from 0 invisible to 1 = 100% visible and anything in between is transparent eg. 0.5 = 50% transparent
background-color: rgba(255, 255, 255, 0);
}
.BottomBlock {
position: absolute;
z-index: 1;
background-color: red;
}
good luck