HTML无透明颜色代码，须用CSS的rgba()/hsla()等格式实现；rgba(0,0,0,0.5)为半透黑，alpha值须为0–1小数，禁用百分比；transparent语义单一，opacity影响整元素及子节点，背景透明应优先用rgba()。
HTML 本身没有“透明颜色代码”这种独立写法，透明效果必须通过 CSS 的 color、background-color、border-color 等属性配合支持透明的色彩格式来实现；直接在 HTML 标签里用 style 写或外部 CSS 文件里写，语法完全一致，区别只在书写位置。
用 rgba() 设置文字/背景透明（最常用）
rgba() 是最直观、兼容性足够好（IE9+）的方式，第四个参数 a 就是 alpha 通道，取值范围是 0（全透）到 1（不透）。
-
rgba(0, 0, 0, 0.5)表示半透黑色，常用于遮罩层文字或弱化背景 -
rgba(255, 255, 255, 0)是完全透明的白色——等效于全透明，但注意：它仍会占据渲染空间，不会像visibility: hidden那样保留布局 - 不要写成
rgba(0,0,0,50%)—— 浏览器不认百分比形式的 alpha 值，必须是小数
/* 外部 CSS 示例 */
.text-fade {
color: rgba(51, 51, 51, 0.7);
}
.card-bg {
background-color: rgba(255, 255, 255, 0.92);
}用 hsla() 实现色相可控的透明（适合设计系统）
和 rgba() 类似，但基于 HSL 色彩模型，更适合需要动态调整饱和度、亮度又保持透明度的场景，比如主题切换时统一控制半透主色。
-
hsla(200, 100%, 50%, 0.3)是半透青蓝色，修改前三个值可调色，第四个值控透明 - 和
rgba()一样，alpha 不接受百分比，0.3≠30%（虽然数值等价，但语法上必须写小数） - IE9+ 支持，但旧 Android Webview（4.3 及更早）有部分 bug，若需兼容极旧环境，优先选
rgba()
.highlight {
border: 2px solid hsla(45, 100%, 60%, 0.8);
}别用 transparent 滥设“透明”，它不是万能占位符
transparent 是一个关键字，等价于 rgba(0,0,0,0)，但它语义单一、不可微调，且在某些属性上行为易被误解。
Perplexity SEO Optimization Guide
下载
Perplexity SEO 优化指南 — 如何获得 Perplexity AI 的引用。涵盖 Perplexity 引用行为、面向 Perplexity 答案的内容结构、Perplex...
立即学习“前端免费学习笔记（深入）”；
- 可用于
background-color或border-color快速清空样式，比如border-color: transparent; - 但
color: transparent;会让文字“消失”，同时仍可被选中、被屏幕阅读器读取——这不是隐藏，而是视觉剔除，SEO 和可访问性可能受影响 - 不能用于
opacity属性值（opacity: transparent无效），也不能和渐变叠加使用（background: linear-gradient(to right, transparent, #fff)是合法的，但这里的transparent是渐变色 stops 的一部分，不是opacity）
慎用 opacity：它影响整个元素及其子节点
opacity 看起来简单，但它是作用于整个元素渲染层的，子元素无法“取消”这个透明度，容易引发意料外的视觉叠加问题。
-
opacity: 0.6会让容器和里面所有文字、图片、按钮一起变淡，即使你只想让背景透 - 如果目标只是让背景透而内容不透，必须用
background-color: rgba(...)，而不是给父容器设opacity -
opacity值为0时元素不可点击、不可聚焦（相当于pointer-events: none的副作用），这点常被忽略
真正要控制透明，核心就两条：该用 rgba() 或 hsla() 的地方别偷懒写 transparent；该隔离透明范围的时候，绝不用 opacity 替代色彩函数。浏览器对色彩格式的解析很严格，多一个空格、错一位小数、混用百分比和小数，都可能导致透明失效或回退到纯黑/纯白。
