Primeiro de tudo, peço desculpas se essa pergunta for um pouco idiota, pois ainda não tenho muito conhecimento em CSS. Estou procurando há um tempo, mas não consegui encontrar uma solução que funcionasse.
Tenho feito algumas modificações pesadas em um tema do Hugo, e tudo está funcionando do jeito que eu quero... exceto pelo efeito de desfoque atrás do meu cabeçalho fixo.
Primeiramente, algumas gravações que descrevem o problema melhor do que palavras:
O que tenho aqui é um gradiente que é usado como imagem de fundo, definido assim no tema do meu site:
background-image: linear-gradient(38.73deg,
rgb(0 37 204 / 25%) 0%,
rgba(201, 32, 184, 0) 50%),
linear-gradient(141.27deg,
rgba(0, 70, 209, 0) 50%,
rgb(174 0 209 / 25%) 100%);
background-attachment: fixed;
Então meu cabeçalho CSS fica assim:
header {
z-index: 10;
position: sticky;
top: 0;
-webkit-backdrop-filter: blur(20px) saturate(0.8) !important;
backdrop-filter: blur(20px) saturate(0.2) !important;
--background-color: rgba(0, 0, 0, 0);
}
.showHeaderOnTop {
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
top: 0;
position: sticky;
}
Como você pode ver, meu cabeçalho transparente e seu efeito de desfoque funcionam bem ao rolar pelo meio da página. No entanto, quando estou no topo da página, em vez da imagem de fundo, consigo ver a cor de fundo da página através do cabeçalho.
Se você olhar para a animação móvel, você pode ver que quando o cabeçalho é expandido, essa lacuna de fundo se expande com ele também. Então parece que a imagem de fundo sempre começa com uma lacuna vertical do topo que é igual à altura atual do cabeçalho.
Alguma ideia de como remover essa lacuna e fazer com que a imagem de fundo sempre comece no topo da página?
Peço desculpas por não fornecer nenhum HTML aqui, pois este é um tema Hugo personalizado com algumas personalizações adicionais... o que significa que o código real é uma bagunça, dividido por todo lugar e gerado por meio de diferentes layouts e arquivos parciais.
Mas se alguém pudesse me indicar a direção certa para onde devo procurar, seria de grande ajuda.