嗨,我想淡出div和它的内容从左和右边缘使用纯CSS。 目前,我能够根据一个关于堆栈溢出的问题的答案来实现这一点。
null.container {
height: 234px;
width: 234px;
overflow: scroll;
mask-image: linear-gradient(transparent,
black 20%,
black 80%,
transparent 100%);
-webkit-mask-image: linear-gradient(transparent,
black 20%,
black 80%,
transparent 100%);
}
.container::-webkit-scrollbar {
display: none;
}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit
dolorem libero, dolor, fuga illo nobis rem ipsam ipsa
perferendis dolore autem fugiat! Dicta eius repellendus totam
qui maiores odio a! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis
rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius
repellendus totam qui maiores odio a! Lorem ipsum dolor sit amet
consectetur adipisicing elit. Impedit dolorem libero, dolor,
fuga illo nobis rem ipsam ipsa perferendis dolore autem fugiat!
Dicta eius repellendus totam qui maiores odio a! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Impedit dolorem
libero, dolor, fuga illo nobis rem ipsam ipsa perferendis dolore
autem fugiat! Dicta eius repellendus totam qui maiores odio a!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit
dolorem libero, dolor, fuga illo nobis rem ipsam ipsa
perferendis dolore autem fugiat! Dicta eius repellendus totam
qui maiores odio a! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Impedit dolorem libero, dolor, fuga illo nobis
rem ipsam ipsa perferendis dolore autem fugiat! Dicta eius
repellendus totam qui maiores odio a!
null
我怎样才能使线性渐变使左右边缘而不是顶部和底部褪色?
另外:这个语法非常简洁,但是我不明白传递给线性梯度的参数是如何指定只从顶部和底部淡化容器的,而其余部分保持原样。 简而言之,我们没有指定任何方向例如到顶部和到底部,那么这实际上是如何工作的呢?
注意:我知道这个问题是这个的重复。 但是在问题上指定的答案并不能解决我的用例,因为它没有淡出div的内部内容。
谢啦! :)