-2

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:

inserir a descrição da imagem aqui

1 Resposta 1

0

A imagem tem background-attachment: fixed;, então basta colcoar a mesma imagem no topo com background-attachment: fixed;

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: 100%;
  height: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #000000;
  color: #00000;
  position: fixed;
  top: 5px;
  left: 5px;
  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;
}
.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>

2
  • 1- não faça reclamações nas publicações. Se quer reclamar use o site correto que é o Stack Overflow em Português Meta. 2- Não votei na pergunta, mas veja essa frase ...Mas se eu colocar um background no topo perde o efeito que o cliente deseja..., mas qual é o efeito que seu cliente deseja? Não tem como o responder a não ser que esteja envolvido no seu projeto. 3- Com todo respeito, a imagética é boa, mas não tenho nada de bom para dizer sobre esse layout. Commented 15/10/2021 às 12:06
  • 1
    1 - oka, bom saber. 2 - O que o cliente quer está na prumeira linha "mascarar o conteúdo que passa por trás de uma div com position". 3 - o layout é só um protótipo.... para explicar aqui no stackoverflow Commented 18/10/2021 às 17:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .