应使用 rgba() 或 hsla() 设置面包屑背景透明度，因其仅作用于背景色；而 opacity 会令整个元素及子元素（含文字、图标）一同变透明，降低可读性、违反无障碍标准，且不可被子元素重置。
HTML 中怎么用透明颜色代码设置面包屑背景
直接用 rgba() 或 hsla() 写背景色，比用 opacity 安全得多——后者会让整个面包屑元素（包括文字、图标）一起变透明，而前者只影响背景。
为什么不能只写 opacity: 0.8
因为 opacity 是作用于整个元素及其所有子节点的，一旦设了 opacity: 0.5，里面的文字、链接、分隔符都会跟着变淡，可读性下降，还可能违反无障碍对比度要求。
-
opacity是继承性属性，子元素无法通过opacity: 1挽回 - 它还会让元素参与层叠上下文，可能意外遮挡或被遮挡其他组件
- 在旧版 Safari（position: sticky 面包屑有渲染 bug
background-color 支持哪些透明写法
现代浏览器都支持以下三种写法，推荐优先用 rgba() ——语义清晰、调试直观、兼容性好（IE9+）：
/* 推荐：RGBA，半透明白色背景 */
.breadcrumb {
background-color: rgba(255, 255, 255, 0.7);
}
<p>/<em> 可选：HSLA，适合调色时保持色调一致 </em>/
.breadcrumb {
background-color: hsla(0, 0%, 100%, 0.7);
}</p><p>/<em> 不推荐：十六进制带 alpha（#RRGGBBAA），部分老工具/IDE 不识别 </em>/
.breadcrumb {
background-color: #ffffffcc; /<em> Chrome/Firefox 支持，但 PostCSS 默认不转译 </em>/
}面包屑透明背景的实际适配要点
透明背景不是设完就完事，得配合其他样式避免视觉问题：
立即学习“前端免费学习笔记（深入）”；
- 必须检查父容器是否有背景图或渐变，否则透明会漏出意料之外的内容
- 文字颜色建议用深灰（如
#333）而非纯黑（#000），避免在浅色底上对比度过高 - 如果面包屑用了
box-shadow，注意阴影也会受透明背景影响，必要时用backdrop-filter: blur(4px)做毛玻璃效果（仅 Chrome/Safari 支持） - 在深色模式下，
rgba(255,255,255,0.7)会显得过亮，建议用@media (prefers-color-scheme: dark)单独覆盖
透明背景真正难的不是写法，而是判断「该透多少」和「背后透出来的东西是否可控」。很多项目上线后才发现面包屑浮在轮播图上时，文字突然看不清——那往往不是透明度设错了，而是没预设好底层内容的视觉权重。
