应使用 color: rgba() 或 hsla() 设置超链接文字透明度，仅影响文字颜色的 alpha 值，不改变下划线、子元素及背景；需用 css 规则显式定义 :link、:hover、:visited 等状态，避免 opacity 导致整体变淡和可访问性问题。
直接用 color: rgba() 改超链接文字透明度
超链接文字要“透明”，不是让整个 @#@#@#@#@#@#@#@#@#@0 —— 文字带 40% 不透明度，背景、下划线、子元素（如 <strong></strong>）全不受影响。
-
#rrggbb和预定义颜色名（如red）不支持透明度，硬写#00000080属非标准写法，部分浏览器可能渲染但不可靠 - 内联样式里
style="color: ..."只控制正常状态（:link），悬停（:hover）、已访问（:visited）仍会回退到浏览器默认色，需额外加<style></style>规则覆盖 - 如果背景色动态变化（比如深色/浅色主题切换），固定低 alpha 值容易跌破 WCAG 对比度 4.5:1，建议优先调亮度（
hsla(0, 0%, 30%, 1)）再微调 alpha
opacity 会让超链接文字“意外变透明”
给 <a></a> 加 style="opacity: 0.3" 看似简单，但后果严重：文字、下划线、图标、内嵌标签全部同步变淡，且子元素无法用 opacity: 1 恢复——因为透明度是乘性叠加，父级 0.3 × 子级 1 = 最终 0.3。
- 下划线也会变淡，导致可点击区域视觉弱化，影响可用性
- 若链接内含 SVG 图标或
<span></span>，它们同样模糊，且无法单独提亮 - 还会触发新的层叠上下文，可能让链接在弹窗、下拉菜单中被错误遮挡
超链接不同状态的颜色必须用 CSS 规则控制
仅靠 style="color: ..." 只能改 :link 状态。鼠标悬停、已点击、已访问后的颜色，浏览器有内置样式（如 :visited 默认紫），内联样式无法覆盖这些伪类。
必须用 <style></style> 块或外部 CSS：
<style>
a { color: rgba(33, 33, 33, 0.7); }
a:hover { color: rgba(0, 120, 255, 0.9); }
a:visited { color: rgba(100, 50, 150, 0.8); }
</style>
- 所有状态都得显式声明，否则未声明的状态会回落到浏览器默认值
- 注意
:visited的限制：出于隐私保护，现代浏览器禁止通过 JS 或 CSS 读取其样式，但设置颜色本身是允许的 - 避免混用内联
color和外部:hover规则，易引发 specificity 冲突
真正难的不是写对 rgba()，而是判断该不该透明
很多设计稿里所谓“高级感”的半透链接，实际在浅灰背景上对比度只有 2.1:1，远低于可读性底线。工具如 axe DevTools 或 Chrome 的 Lighthouse 会直接报错。
更隐蔽的问题是：你设了 color: rgba(0,0,0,0.2)，但用户开了系统高对比度模式，或者用了深色主题扩展，此时文字可能彻底消失。
- 不要为“透明”而透明；先确认是否真需要降低信息权重，还是只是想弱化视觉层级
- 若目标是“弱化次要链接”，改字体粗细（
font-weight: 400）、字号（font-size: 0.9em）或加text-decoration: none往往比调透明更安全 - 所有带 alpha 的文字色，上线前务必在真实设备 + 真实背景色下肉眼验证可读性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
