根本原因是渐变背景与文字颜色对比度不足（低于4.5:1），导致文字陷于暗区或亮区；应主动用background-blend-mode、伪元素+backdrop-filter等方案提升可读性，并通过工具校验WCAG对比度。
渐变背景里文字看不清的根本原因
直接用 background: linear-gradient(...) 覆盖整个容器，又没控制文字颜色或加遮罩，文字就容易陷进渐变的暗区或亮区里——不是发灰就是发白，对比度低于 4.5:1，人眼自然吃力。这不是 CSS 写错了，是没主动管理「可读性」这个设计约束。
用 background-blend-mode 快速提升文字对比度
不用改 HTML 结构，也不用额外加伪元素，直接在已有渐变背景上叠加一层纯色层，靠混合模式让文字区域自动“浮出来”：
div {
background: linear-gradient(135deg, #3498db, #e74c3c);
background-blend-mode: multiply;
background-color: rgba(255, 255, 255, 0.1); /* 浅白底，透明度调到刚好托住文字 */
color: white;
}
关键点：
-
multiply模式会让浅色区域变亮、深色区域更暗，文字周围自动形成“提亮晕染”效果 -
background-color用rgba()控制透明度，0.05–0.15是常用安全区间；太大会盖住渐变，太小则无效 - 该方案对深色文字不友好，如果文字是黑色，换成
screen或overlay模式再配深色background-color
更可控：伪元素 + backdrop-filter 做局部降噪
当渐变复杂、方向多变，或需要适配深色/浅色主题切换时，用伪元素精准包裹文字区域，再加一层半透磨砂层：
div {
position: relative;
background: linear-gradient(45deg, #6a11cb, #2575fc);
}
div::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(4px);
z-index: 1;
}
div > * {
position: relative;
z-index: 2;
color: #333;
}
注意：
-
backdrop-filter在 Safari 和 Chrome 新版支持良好，但 Firefox 默认禁用（需用户开启layout.css.backdrop-filter.enabled） - 模糊值
blur(2px–6px)是平衡性能与可读性的关键，超过8px在中低端设备会卡顿 - 伪元素的
rgba背景色别用纯黑/纯白，选中间灰（如#f8f8f8或#222）更能兼容两侧渐变色
别漏掉 WCAG 对比度的硬校验
视觉“觉得清楚”不等于达标。用工具验证：color-contrast 函数（CSS Color Level 4，目前仅 Safari 支持实验性启用），或更实际的做法：
- 在 Chrome DevTools 的
Styles面板里，悬停颜色值，右侧会显示实时对比度比值（如4.7:1） - 手动测：把渐变截图 → 用 Photoshop 或在线工具（如 WebAIM Contrast Checker）取文字所在位置的背景色采样，再和文字色比对
- 深色模式下，同一套渐变可能突然失效——务必单独测试
@media (prefers-color-scheme: dark)下的组合
渐变本身没有错，错的是把它当成“背景”就完事了；可读性从来不是背景的附属品，而是必须被测量、被干预、被降级兜底的独立需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
