I want my position fixed to viewport text to change color depending on where you are on the website. I tried adding position absolute containers, which would be clipped by the text, but it doesn't seem to work. E.g. text is black on white background, but white on every other color.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles2.css">
</head>
<body>
<div>
<h1 class="header">Header</h1>
<div class="fp-container-1"></div>
<div class="fp-container-2"></div>
<div class="fp-container-3"></div>
</div>
</body>
</html>
CSS:
body {
font-family: 'Roboto', sans-serif;
overflow-x: hidden;
margin: 0;
}
.header {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
width:100vw;
top: 10vh;
z-index: 1;
}
.fp-container-1 {
display: flex;
position: absolute;
top: 0vh;
height: 100vh;
width: 100vw;
background-color: white;
}
.fp-container-2 {
display: flex;
position: absolute;
top: 100vh;
height: 100vh;
width: 100vw;
background-color: blue;
}
.fp-container-3 {
display: flex;
position: absolute;
top: 150vh;
height: 200vh;
width: 100vw;
background-color: yellowgreen;
clip-path: url(.header);
z-index: -1;
}
