Skip to content

Instantly share code, notes, and snippets.

@Peterimie

Peterimie/over.html

Created May 18, 2022 15:17
Show Gist options
  • Save Peterimie/d56183c30143ed851fca1fb4352b1fa4 to your computer and use it in GitHub Desktop.
Save Peterimie/d56183c30143ed851fca1fb4352b1fa4 to your computer and use it in GitHub Desktop.
Download ZIP
HOW TO USE DARK OVERLAY IN YOUR CSS STYLING
Raw
over.html
<!DOCTYPE html>
<html>
<head>
<title>overlay</title>
<style type="text/css">
body{margin: 0;background-color: skyblue;}
#a{
background-image: url("b1.jpg");
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
height: 400px;
width: 500px;
z-index: 1;
margin: auto;
}
#b{
background-color: black;
overflow: hidden;
height: 400px;
width: 500px;
z-index: 2;
margin: auto;
opacity: 70%;
}
</style>
</head>
<body>
<div id="a">
<div id="b">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment