javascript - 淡化 div 中文本的底部或顶部

Question

我想创建一个特定大小的列表，但它的内容可能比列表大。

我认为如果列表中有元素并且它们在底部和顶部淡出，同时为也包含该列表的容器提供背景图像，那将会非常漂亮。事实证明，这比预期的要难，而且我很难为此类事情找到合适的指南。

下图显示了预期的结果

这可能吗？提前致谢。

编辑:

• 我看过this和 this ，但我不能使用这些技术，因为背景中有背景图像，而不是纯色

Answer 1

我能够得到一个丑陋的原型(prototype)。这仅适用于 -webkit- 浏览器(Chrome、Safari 等)，但它可能会为您指明正确的方向并帮助您进行调整以使其跨浏览器兼容。

.con{background:#0f0; color:#fff;}
ul{margin:0; padding:0; list-style:none; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,  from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

<div class="con">
    <ul>
    	<li>thing1</li>
    	<li>thing2</li>
    	<li>thing3</li>
    	<li>thing4</li>
    	<li>thing5</li>
    	<li>thing6</li>
    </ul>
</div>