CSS webpage filter

HTML-CSS
#1

Hello everybody!

I making a retro game using p5js and am working on adding a CTR screen effect to the webpage I am using. In my style.css file I have implemented the following code:

body {
  background: linear-gradient(
    to bottom,
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.25) 50%
  );
  background-size: 100% 8px;
  z-index: -3;
  pointer-events: none;
}

This creates many semi-translucent lines that make their way across the screen. This is exactly what I want except for the fact that any objects placed into the page are rendered above the lines. I am confident this is because the lines are put into the background of the document as seen in line 2. Is there a way I could instead render them on top of all other objects?

Thank you!

#2

Reading what you have mentioned I coded this up. The lines appear on-top of the text and the red square.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>

<style>
	body {
		margin: 0;
		padding: 0;
	}
	
	.background {
 		 background: linear-gradient(to bottom, rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
 		 background-size: 100% 8px;
 		 z-index: 1;
 		 pointer-events: none;
 		 width: 100%;
 		 height: 100%; 
 		 position: absolute;
	}

	.content {
		z-index: -1;
	}

</style>
<body>

	<div class="background"></div>

		<div class="content">

			<div class="test">Test test test</div>

			<div class="square" style="width: 100px; height: 100px; background-color: red;"></div>

		</div>
</body>
</html>
#3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.