CSS/HTML 滚动文本,不带滚动条

发布于 2024-12-05 16:56:14 字数 191 浏览 0 评论 0原文

全部!

我需要在图片上制作类似的效果。我可以制作文本着色(文本顶部和底部的透明图像),但我不知道如何制作没有滚动条和剪切的可滚动文本(溢出:隐藏)。有什么想法吗? 在此处输入图像描述

我只有一个想法 - 在滚动条上添加图像以对用户隐藏它

all!

I need to make effects with like on the picture. I can make text shading (transparent imgage on top and bottom of a text) but I have no idea how to make scrollable text without scrollbars and clipping (overflow: hidden). Have eny idea?
enter image description here

I have only one idea - add image over scrollbar to hide it from users

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

清风疏影 2024-12-12 16:56:14

试试这个:

<div id="container" style="width: 183px; height: 183px; overflow:
hidden; border: solid black 1px">
<div id="floating-div" style="width: 200px; height:200px; overflow:
auto">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
</div>
</div>

Try this out:

<div id="container" style="width: 183px; height: 183px; overflow:
hidden; border: solid black 1px">
<div id="floating-div" style="width: 200px; height:200px; overflow:
auto">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
</div>
</div>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文