应直接用color: rgba()或hsla()设置文字透明度，因为opacity会使整个元素及子元素一同变淡，无法单独控制文字；rgba()仅作用于颜色本身，不影响背景、边框或子元素，且alpha值为0–1小数。

直接用 color 配 rgba() 或 hsla()，别碰 opacity —— 后者会让文字连同父容器一起变淡，根本不是“调文字透明度”。

用 color: rgba() 设置文字本身透明度

这是最干净、最可控的方式：只影响文字颜色，不波及背景、边框或子元素。

• rgba() 第四个参数是 alpha 值（0–1），比如 color: rgba(0, 0, 0, 0.3) 表示黑色文字带 30% 不透明度
• 必须写全四元组，rgb(0,0,0) 没透明度，rgba(0,0,0,0.3) 才有效
• 十六进制色值如 #333 不支持透明度，要转成 rgba(51, 51, 51, 0.7) 或用 hsla()
• 如果背景色会变（比如暗色/亮色主题切换），硬调 alpha 容易导致对比度跌破 4.5:1，建议优先调亮度（hsla(0, 0%, 40%, 1)）再微调 alpha

为什么不能用 opacity 给文字设透明度

opacity 是作用于整个元素及其所有后代的——你给一个 <p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a> <p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p> </div> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 加 opacity: 0.5，里面所有文字、链接、<span></span> 全部跟着变淡，且无法单独恢复。

• 常见误用：<p style="opacity: 0.4">文字</p> → 文字模糊、可读性骤降，尤其在浅灰背景上几乎看不见
• 更糟的是：如果这个 <p></p> 里嵌了 <strong></strong> 或图标，它们也一并变淡，没法用 opacity: 1 覆盖回去
• 它还会让元素参与层叠上下文，可能意外遮挡或被遮挡其他元素

需要半透背景+不透明文字？用 background-color: rgba() 配普通 color

这是表格、卡片、按钮等场景的真实需求：背景朦胧，文字清晰。

• 例如：background-color: rgba(255, 255, 255, 0.1); color: #000; —— 白色背景带 10% 不透明，文字纯黑
• 注意：不要用 opacity 去“模拟”这种效果，否则文字也会透，得额外套一层容器，徒增 DOM 复杂度
• 如果背景是图片，就用伪元素 + background + z-index 分离图层，文字放主元素里保持原色

真正难的不是写对那行 rgba()，而是判断该不该调透明度——很多所谓“高级感”设计，其实只是把文字弄模糊了。检查 WCAG 对比度，比调 alpha 值重要得多。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！