使用 CSS 实现文本渐隐效果（#代码片段）
内容提要
使用 CSS 的 mask-image 属性可为文本底部添加渐隐效果。通过设置线性渐变遮罩，从 75% 处由白色过渡到透明，实现淡出。该方法简洁实用，适合前端开发中的渐隐文本制作。
延伸解读
mask-image 实现渐隐的核心机制
文章使用 mask-image 配合 linear-gradient 创建文本底部渐隐。遮罩从 75% 处开始由白色过渡到透明，白色区域完全显示文本，透明区域隐藏文本，中间形成平滑淡出。这种方法不改变文本颜色或背景，仅通过遮罩控制可见性，因此适用于任意背景上的文本。
自定义属性 --fade-start 的灵活性
代码中通过 CSS 自定义属性 --fade-start 控制渐隐起始位置，默认值为 75%。调整该变量即可改变淡出开始的高度比例，例如设为 50% 会让渐隐更早开始。这种设计便于在不同场景下快速复用和微调，无需重写整个遮罩规则。
适用场景与注意事项
该技巧适合需要文本底部自然淡出的界面，如预览卡片、折叠内容提示等。由于 mask-image 是标准 CSS 属性，现代浏览器支持良好，但需注意遮罩会同时影响文本的子元素和装饰。若文本背景非纯色，渐隐效果依然有效，因为遮罩作用于元素整体透明度。
Q&A
如何用 CSS 实现文本底部渐隐效果？
使用 CSS 的 mask-image 属性，配合线性渐变遮罩。例如：p { mask-image: linear-gradient(to bottom, white 75%, transparent); } 这样文本从 75% 处开始由白色过渡到透明，实现底部渐隐。
mask-image 实现文本渐隐的原理是什么？
mask-image 通过线性渐变创建遮罩，白色部分完全显示文本，透明部分隐藏文本，中间渐变区域实现平滑过渡，从而让文本底部逐渐淡出。
文本渐隐效果中，如何控制渐隐开始的位置？
通过 CSS 自定义属性 --fade-start 控制，例如设置为 75%，则从文本高度的 75% 处开始渐隐。可以调整该值改变渐隐起始位置。
mask-image 做文本渐隐有什么优点？
mask-image 方法简洁实用，只需少量 CSS 代码即可实现平滑的文本渐隐效果，适合前端开发中的渐隐文本制作。
除了文本，mask-image 还能用于其他元素吗？
文章主要介绍使用 mask-image 为文本添加渐隐效果，但该属性也可应用于其他 HTML 元素，实现类似的遮罩渐隐。
使用 mask-image 实现文本渐隐需要哪些 CSS 代码？
需要设置 mask-image 属性，例如：p { --fade-start: 75%; mask-image: linear-gradient(to bottom, white var(--fade-start), transparent); } 同时可设置 body 的文字颜色和行高。
