如果文本在视口中可见，如何淡出文本但显示它？答案

【问题标题】：How do I fade out text but display it if it's visible in the viewport?如果文本在视口中可见，如何淡出文本但显示它？
【发布时间】：2022-12-09 11:32:07
【问题描述】：

我知道我可以淡出文字

mask-image: linear-gradient(to bottom, black calc(100% - 2rem), transparent 100%);

我用它来表示文本溢出/可滚动，但是一旦用户滚动以查看文本的其余部分，我希望禁用淡入淡出。

【问题讨论】：

标签： css fade

【解决方案1】：

要使文本淡出但在视口中可见时显示它，您可以结合使用 mask-image 属性以及 position 和 top 属性。

以下是如何使用这些属性为溢出文本创建淡出效果的示例：

// Set the mask-image property to fade out the text p { mask-image: linear-gradient(to bottom, black calc(100% - 2rem), transparent 100%); }

// Set the position and top properties to hide the fade-out effect // when the text is visible in the viewport p.fade-out { position: relative; top: -2rem; }

在此示例中，mask-image 属性用于为文本创建淡出效果。当文本在视口中可见时，position 和 top 属性然后用于隐藏淡出效果。

要在您的 HTML 中使用此 CSS，您可以将淡出类添加到任何带有溢出文本的元素，如下所示：

<p class="fade-out">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>

这会将淡出效果应用于文本，并在文本在视口中可见时隐藏淡出效果。您可以调整 mask-image、position 和 top 属性的值来自定义文本的淡出效果和位置。

【讨论】：