gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 13:08:36 26 4
gpt4 key购买 nike

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

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

下图显示了预期的结果

enter image description here

这可能吗?提前致谢。

编辑:

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

最佳答案

我能够得到一个丑陋的原型(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>

关于javascript - 淡化 div 中文本的底部或顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28446210/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com