如何解决默认audio音频播放器背景设置透明不生效问题

问题描述 #

给audio播放器设置背景透明时，指定任意实色背景都能正常生效，但设置background-color: transparent无法实现透明效果，已尝试的CSS代码如下：

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-panel {
  background-color: transparent;
}

失效原因 #

Webkit内核（Chrome、Edge、Safari等）的原生音频控件默认有多层浏览器内置渲染的背景，仅修改-webkit-media-controls-panel的背景色无法覆盖所有不透明的默认背景层，部分场景下样式优先级不够也会导致自定义透明属性被浏览器默认样式覆盖。

修复方案 #

需要选中所有和控件背景相关的伪元素，同时提升样式优先级覆盖浏览器默认样式，兼容主流浏览器的完整代码如下：

/* Webkit内核浏览器兼容 */
audio,
audio::-webkit-media-controls-enclosure,
audio::-webkit-media-controls-panel,
audio::-webkit-media-controls-play-button {
  background-color: transparent !important;
}

/* Firefox浏览器兼容 */
audio::-moz-media-controls-enclosure,
audio::-moz-media-controls-panel {
  background-color: transparent !important;
}

补充说明 #

• 如果设置后仍看到不透明底色，先检查audio标签的父级元素是否设置了不透明背景，排除父元素背景的视觉干扰
• 部分移动端浏览器对原生audio控件的伪元素开放权限极低，无法通过CSS修改默认样式，如果有高自由度的样式需求，建议隐藏原生控件后实现自定义播放UI

内容的提问来源于stack exchange，提问作者dciweivq rfn1ur