Фоновый линейный градиент не работает в марки -диви ⇐ Html

[Anonymous]

Я работаю над шаром, который отображает разные изображения. Шатер работает хорошо, однако фоновый линейный градиент, который я использую для обеспечения прохладного эффекта, не является. Цель состоит в том, что изображения исчезают справа, чтобы исчезнуть слева, но изображения находятся на вершине градиента. Я даже пытался использовать Div внутри шатра с высоким z-индексом, но с тем же результатом.




Document

*{
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%);
}
*/

















< /code>
Вы, ребята, знаете, в чем проблема? Я смотрел на другие ответы людей, использующие градиенты для этих типов эффектов, но я, кажется, не трескаю его. Заранее спасибо за помощь.

Подробнее здесь: https://stackoverflow.com/questions/795 ... arquee-div