Existe uma forma de mascarar o conteúdo que passa por trás de uma div com position fixed?
Veja o exemplo abaixo, ao dar um scroll o texto acaba ficando embaixo do TOPO, dando dificuldade na leitura. Mas se eu colcoar um background no topo perde o efeito que o cliente deseja.
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
height: 100%;
overflow-x: hidden;
}
.fundo{
height: 500px;
position: relative;
background-image: url(https://wordpress-network.prod.aws.skyscnr.com/wp-content/uploads/2018/05/10-inspiring-places-watch-sunsets-around-world.jpg?w=482&h=283&crop=1);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.topo{
width: 200px;
height: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #000000;
color: #00000;
position: fixed;
top: 5px;
left: 5px;
}
.texto{
color: #00000;
padding-top: 100px;
}
<div class="fundo">
<div class="topo">AQUI É O TOPO</div>
<div class="texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue erat sodales, feugiat dui in, feugiat nunc. Mauris eget ullamcorper nibh, nec accumsan odio. Praesent turpis nibh, congue varius enim id, lobortis mollis enim. Sed accumsan rhoncus sapien et vehicula. Nulla ut felis faucibus, maximus mi nec, sollicitudin augue. Pellentesque fringilla vestibulum lorem non mattis. Nunc sit amet tincidunt odio, quis convallis tellus.</div>
</div>
Eu precisaria de algo assim: