HTML内联样式设透明色应使用rgba()或hsla()函数，如style="background-color: rgba(255, 0, 0, 0.3);"；opacity作用于整个元素及其子内容，rgba()仅影响指定颜色属性；IE8及以下需用filter: alpha(opacity=50)降级兼容。
HTML内联样式怎么写透明色
直接用 rgba() 或 hsla() 函数，别用十六进制（如 #000000）或英文名（如 black）——它们不支持透明度。
最常用的是 rgba()：前三个参数是红、绿、蓝的数值（0–255），第四个是透明度（0 完全透明，1 完全不透明，可取小数如 0.5）。
style="background-color: rgba(255, 0, 0, 0.3);"
这个例子让背景是半透红色。注意：不能写成 rgba(255,0,0,30%)，百分比写法无效，必须用 0–1 小数。
opacity 和 rgba 的区别在哪
opacity 作用于整个元素及其所有子内容（文字、子盒子、边框等都会变透明），而 rgba() 只影响当前属性指定的颜色（比如只让背景透，文字保持不透明）。
立即学习“前端免费学习笔记（深入）”；
- 用
opacity: 0.4→ 整个<div>包括里面文字都变淡 - 用
background-color: rgba(0, 0, 0, 0.4)→ 只背景透，文字照常清晰 -
opacity不区分颜色类型，rgba()必须配合具体颜色属性（color、background-color、border-color等）
IE8及更老浏览器怎么处理透明色
IE8 及以下不支持 rgba() 和 hsla()，opacity 也只支持私有滤镜写法 filter: alpha(opacity=40)（值是 0–100 的整数）。
如果必须兼容，只能降级处理：
- 先写标准
rgba()声明 - 再紧跟着写 IE 专用
filter（IE 会覆盖前面的 rgba，其他浏览器忽略 filter） - 注意：
filter会影响整个元素，类似opacity，不是局部透明
style="background-color: rgba(0, 0, 0, 0.5); filter: alpha(opacity=50);"
透明色常见踩坑点
实际写的时候这几个地方最容易出错：
- 把
rgba(0,0,0,0.5)写成rgba(0,0,0,50%)—— 浏览器直接忽略整条声明 - 对
color用opacity想只让文字变透，结果连文字阴影、伪元素都一起淡了 - 在渐变（
linear-gradient）里混用rgba()和十六进制色，漏掉 alpha 导致过渡生硬 - 用
hsla(0, 0%, 0%, 0.5)时，第三位亮度值写成0（纯黑）却忘了加单位%，变成无效语法
透明不是开关，是分层控制的事。什么时候该动 rgba，什么时候该动 opacity，得看你要透的是“颜色本身”，还是“整个元素的渲染层”。
