如何实现类似Discord的语音音量条，解决背景色与页面不匹配问题

你之前使用background-image覆盖实现的方案，核心问题是图片色值无法和页面动态/自定义背景色适配，直接改用纯CSS两层嵌套结构即可实现和Discord完全一致的效果，同时解决背景色不一致问题。

• 基础HTML结构

<div class="volume-track">
  <div class="volume-active" style="--volume: 60;"></div>
</div>

• 核心CSS代码

/* 音量条轨道，直接适配页面背景色 */
.volume-track {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  /* 直接设置为和页面主体背景一致的色值即可，也可以用inherit继承父级背景 */
  background-color: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

/* 音量激活区域，通过CSS变量控制占比 */
.volume-active {
  height: 100%;
  width: calc(var(--volume, 0) * 1%);
  border-radius: 4px;
  /* 激活态蓝色可根据需求调整，和Discord默认色一致的取值为#5865f2 */
  background-color: #5865f2;
  transition: width 0.1s linear;
}

• 动态更新音量的JS逻辑

// 实时获取当前音量值后更新变量即可
function updateVolume(volume) {
  document.querySelector('.volume-active').style.setProperty('--volume', volume);
}

内容的提问来源于stack exchange，提问作者鄭宇紹