Neha Purwar Neha Purwar - 7 months ago 8
HTML Question

How to create an overlay over a view

I am trying to set an overlay in my web page but I am unable to do this. Can anyone solve my problem.

My code for setting an overlay over a view is like this:

<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#cover{
position:fixed;
top:0;
left:0;
background:#000;
z-index:1;
width:100%;
height:100%;
display:none;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="cover" >
<p>-----</p>
</div>
</body>


But not getting the desired output.



#cover {
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 1;
width: 100%;
height: 100%;
display: none;
opacity: 0.5;
}

<div id="cover">
<p>-----</p>
</div>




Answer

Just remove the display: none, you should be able to view the overlay

<!DOCTYPE html>
<html lang="en">

<head>
  <style type="text/css">
    #cover {
      position: fixed;
      top: 0;
      left: 0;
      background: #000;
      z-index: 1;
      width: 100%;
      height: 100%;
      opacity: 0.5;
    }
  </style>
</head>

<body>
  <div id="cover">
    <p>-----</p>
  </div>
</body>

Comments