Início / coding / Perguntas / 78170601
Accepted
Evert
Asked: 2024-03-16 12:28:03 +0800 CST

Pare o gradiente linear após certa altura

  • 772

Estou tentando adicionar um gradiente ao meu plano de fundo usando CSS. Quero que esse gradiente não seja 'fixo', mas role com a página. Para páginas muito altas, quero apenas que o gradiente termine.

Este é o meu CSS:

body {
  min-height: 100%;
  background-color: #F00;
  background-repeat: no-repeat;
  background: linear-gradient(
    180deg,
    #F00 0px,
    #0F0,
    #00F,
    #F00 3000px
  )
}

O problema é que quando eu rolar para baixo, após a dobra da página o gradiente recomeça. Na minha tela de altura de 1200px, ela nunca fica azul.

Meu objetivo é que o gradiente seja renderizado uma vez e se a página for maior que o gradiente (digamos 3000px), seja para sempre #F00. Não repetir não teve efeito.

Codepen para referência .

html

2 respostas

  1. Best Answer

    Você pode definir a imagem de fundo e a cor de fundo separadamente.

    document.addEventListener('DOMContentLoaded', () => {
  const p = document.getElementsByTagName('p')[0];

  console.log(p)
  for (let i = 0; i < 1000; i++) {
    document.body.appendChild(p.cloneNode(true));
  }

});
    body {
  min-height: 100%;
  background-color: #F00;
  background-repeat: no-repeat;
  background-image: linear-gradient(180deg, #F00 0px, #0F0, #00F, #F00 3000px);
  background-size: 100% 3000px;
}
    <p>Long line test</p>

    • 1

  2. Seu código estava bom, mas você está enfrentando a propagação em segundo plano para o elemento html. Adicione qualquer cor de fundo ao html para corrigir isso e você não precisa definir background-repeatou background-sizeou background-colorno elemento body

    document.addEventListener('DOMContentLoaded', () => {
  const p = document.getElementsByTagName('p')[0];

  for (let i = 0; i < 400; i++) {
    document.body.appendChild(p.cloneNode(true));
  }

});
    html {
  height: 100%;
  background: #fff; /* added this */
}

body {
  margin: 0;
  min-height: 100%;
  background: linear-gradient(#F00, #0F0, #00F, #F00 3000px);
}
    <p>Long line test</p>

    • 0

relate perguntas