HTML本身不支持颜色透明变体，真正起作用的是CSS的rgba()或hsla()函数；rgba()通过红、绿、蓝及alpha（0–1小数）定义带透明度的颜色，仅影响当前属性，而opacity会全局降低整个元素及其子元素的透明度。
HTML 本身不直接支持“颜色透明变体”——真正起作用的是 CSS 的 color、background-color 等属性配合 alpha 通道（如 rgba() 或 hsla()），而 HTML 标签里的 bgcolor 等旧属性早已废弃且不支持透明度。
用 rgba() 快速生成带透明度的颜色变体
这是最常用、兼容性好（IE9+）、语义清晰的方式。把已知的 RGB 值加上第四个参数（alpha，范围 0–1）即可：
比如原色是 #3498db（蓝），想做成 70% 不透明（即 30% 透明），先转成 RGB：rgb(52, 152, 219)，再加 alpha：rgba(52, 152, 219, 0.7)。
常见错误：把 alpha 写成百分比（如 0.3% 或 30%）——rgba() 要求是 0–1 的小数，不是百分数。
立即学习“前端免费学习笔记（深入）”；
无序列表说明要点：
-
rgba(r, g, b, a)中的a是浮点数，0完全透明，1完全不透明 - 不要用
rgb(52,152,219,0.7)—— 缺少a就不是rgba，浏览器会直接忽略整条声明 - 在 Sass/Less 中可用
transparentize($color, $amount)或fadeout($color, 30%)自动计算，但最终编译仍是rgba()
为什么不用 opacity 替代 alpha？
opacity 会让整个元素（包括文字、子元素、边框）一起变透明，而 rgba() 只影响当前颜色本身。这是关键区别。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
例如：div { background-color: rgba(0,0,0,0.5); color: white; } —— 背景半透，文字仍 100% 清晰；若写 div { opacity: 0.5; }，文字也会变淡、难读。
容易踩的坑：
- 给按钮加
opacity: 0.6后，里面的图标和文字都模糊了，其实只需改background-color: rgba(…) -
opacity会触发新层叠上下文，可能意外改变 z-index 行为 - 动画中频繁改
opacity比改rgba()更易触发重绘（尤其低端设备）
hsla() 更适合调色时控制透明度
如果你在调整主色的明暗/饱和度（比如从深蓝变成浅蓝再加透明），hsla() 比 rgba() 更直观：色调（h）不变，只调 s（饱和度）、l（亮度）、a（透明度）。
示例：hsla(205, 75%, 55%, 0.8) 是一个偏灰蓝、较亮、80% 不透明的色值；微调 l: 45% 就变深，a: 0.4 就变更透——不用反复换算 RGB。
注意点：
-
hsla()在所有现代浏览器中支持良好，但 IE8 及更早版本完全不支持（连rgba()都不支持） - 部分设计工具（如 Figma）导出的 CSS 默认用
hsla()，前端直接粘贴可用，无需转换 - 避免混用单位：比如
hsl(205, 75%, 55%)是不透明的，加a才是hsla()，漏掉a就失效
真正要生成“透明变体”，核心就一条：别碰 HTML 属性，老老实实写 CSS，优先选 rgba() 或 hsla()；opacity 是全局开关，不是颜色调节器。alpha 值的小数精度（比如 0.55 和 0.555）在多数场景下人眼几乎看不出差别，不必过度纠结——但写错格式（比如多加个 %）就会让整条样式静默失败。
