Full screen Not Clickable overlapping layer / overlay - CSS

I need to use CSS fullscreen not-clickable overlapping layer, that should be lightly transparent. How can I create a simple CSS overlay with transparency ?
posted on 16.11.2019 at 19:43
0pnshow more
zeddzedd
Hi,

To create a full screen not-clickable overlapping layer with transparency, you can use this CSS code:

position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.3);
z-index: -1;


You can also use this solution:

position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: -1;


If needed, you can modify the position of overlay by z-index value.


posted on 28.12.2019 at 18:55
0pnshow more
TimTim
share on facebookshare on twitter
2020 AnswerTabsTermsContact us
This site uses cookies to improve your experience, for analytics and ads. By continuing to browse this site you agree to our use of cookies.