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 ?
0
give a positive ratinggive a negative rating
16 Nov 2019 at 07:43 PM
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.


0
give a positive ratinggive a negative rating
28 Dec 2019 at 06:55 PM
Tim
Share on FacebookShare on TwitterShare on LinkedInSend email
x
x
2024 AnswerTabsTermsContact us