Início / coding / Perguntas / 79544976
Accepted
Th3W31rd0
Asked: 2025-03-31 02:04:01 +0800 CST

Gradiente linear de fundo não funciona no marquee div

  • 772

Estou trabalhando em um letreiro que exibe imagens diferentes. O letreiro está funcionando bem, no entanto, o gradiente linear de fundo que estou usando para dar um efeito legal não está.
O objetivo é que as imagens apareçam gradualmente da direita para desaparecer gradualmente da esquerda, mas as imagens estão em cima do gradiente. Eu até tentei usar um div dentro do letreiro com um z-index alto, mas com o mesmo resultado.

Deixo aqui um MWE do que fiz:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  padding-top: 6.5rem;
  padding-bottom: 6.5rem;
  background-color: white;
}

.marquee {
  display: flex;
  overflow: hidden;
  gap: 0.3rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  background: rgb(255, 255, 255);
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(9, 9, 121, 0) 35%, rgba(0, 212, 255, 0) 65%, rgba(255, 255, 255, 1) 100%);
  background-origin: content-box;
  background-clip: content-box;
}

.track {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18rem;
  animation: scroll 20s linear infinite;
  position: relative;
}

.image-marquee img {
  width: 100%;
  height: 6rem;
  position: relative;
}

@keyframes scroll {
  from {
    transform: translateX(calc(100% + 18rem));
  }

  to {
    transform: translateX(calc(-100% - 18rem))
  }
}

/* Test
#mcover{
    z-index:10;
    background: rgb(255,255,255);
    background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(9,9,121,0) 25%, rgba(0,212,255,0) 75%, rgba(255,255,255,1) 100%);
}
*/
<div class="main">
  <div class="marquee">
    <div class="track">
      <div class="image-marquee">
        <img src="https://brandingforthepeople.com/wp-content/uploads/2019/04/Stock-Photography-vs-Real-Imagery.jpg">
      </div>
      <div class="image-marquee">
        <img src="https://media.istockphoto.com/id/1435220822/photo/african-american-software-developer.jpg?s=612x612&w=0&k=20&c=JESGRQ2xqRH9ZcJzvZBHZIZKVY8MDejBSOfxeM-i5e4=">
      </div>
      <!-- 
      Cover attempt
      <div id="mcover"></div>
      -->
    </div>
  </div>
</div>

Vocês sabem qual é o problema? Eu olhei as respostas de outras pessoas usando gradientes para esses tipos de efeitos, mas parece que não estou conseguindo. Agradeço antecipadamente pela ajuda.

html

1 respostas

  1. Best Answer

    As imagens estão contidas no murquee, e sempre apareceriam acima do fundo. Você pode usar um pseudoelemento posicionado absoluto (o ::before) com z-index: 1para criar uma camada com o fundo acima das imagens:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  padding-top: 6.5rem;
  padding-bottom: 6.5rem;
  background-color: white;
}

.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  gap: 0.3rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  background: rgb(255, 255, 255);
  background-origin: content-box;
  background-clip: content-box;

  &::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(9, 9, 121, 0) 35%, rgba(0, 212, 255, 0) 65%, rgba(255, 255, 255, 1) 100%);
    content: "";
  }
}

.track {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18rem;
  animation: scroll 20s linear infinite;
  position: relative;
}

.image-marquee img {
  width: 100%;
  height: 6rem;
  position: relative;
}

@keyframes scroll {
  from {
    transform: translateX(calc(100% + 18rem));
  }

  to {
    transform: translateX(calc(-100% - 18rem))
  }
}

/* Test
#mcover{
    z-index:10;
    background: rgb(255,255,255);
    background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(9,9,121,0) 25%, rgba(0,212,255,0) 75%, rgba(255,255,255,1) 100%);
}
*/
    <div class="main">
  <div class="marquee">
    <div class="track">
      <div class="image-marquee">
        <img src="https://brandingforthepeople.com/wp-content/uploads/2019/04/Stock-Photography-vs-Real-Imagery.jpg">
      </div>
      <div class="image-marquee">
        <img src="https://media.istockphoto.com/id/1435220822/photo/african-american-software-developer.jpg?s=612x612&w=0&k=20&c=JESGRQ2xqRH9ZcJzvZBHZIZKVY8MDejBSOfxeM-i5e4=">
      </div>
      <!-- 
      Cover attempt
      <div id="mcover"></div>
      -->
    </div>
  </div>
</div>

    Outra opção para mover a .trackcamada sob o .murqueeusando position: relative;e z-index: -1;. Você então terá que usar o contêiner de .murquee(o .murquee-container) para evitar que ele deslize sob o fundo branco usando isolation: isolate;:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.marquee-container {
  isolation: isolate;
  padding-top: 6.5rem;
  padding-bottom: 6.5rem;
  background-color: white;
}

.marquee {
  display: flex;
  overflow: hidden;
  gap: 0.3rem;
  padding-top: 2rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(9, 9, 121, 0) 35%, rgba(0, 212, 255, 0) 65%, rgba(255, 255, 255, 1) 100%);
  background-origin: content-box;
  background-clip: content-box;
}

.track {
  position: relative;
  z-index: -1;
  
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18rem;
  animation: scroll 20s linear infinite;
  position: relative;
}

.image-marquee img {
  width: 100%;
  height: 6rem;
  position: relative;
}

@keyframes scroll {
  from {
    transform: translateX(calc(100% + 18rem));
  }

  to {
    transform: translateX(calc(-100% - 18rem))
  }
}

/* Test
#mcover{
    z-index:10;
    background: rgb(255,255,255);
    background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(9,9,121,0) 25%, rgba(0,212,255,0) 75%, rgba(255,255,255,1) 100%);
}
*/
    <div class="marquee-container">
  <div class="marquee">
    <div class="track">
      <div class="image-marquee">
        <img src="https://brandingforthepeople.com/wp-content/uploads/2019/04/Stock-Photography-vs-Real-Imagery.jpg">
      </div>
      <div class="image-marquee">
        <img src="https://media.istockphoto.com/id/1435220822/photo/african-american-software-developer.jpg?s=612x612&w=0&k=20&c=JESGRQ2xqRH9ZcJzvZBHZIZKVY8MDejBSOfxeM-i5e4=">
      </div>
      <!-- 
      Cover attempt
      <div id="mcover"></div>
      -->
    </div>
  </div>
</div>

    • 2

relate perguntas