设置.spinner-container半透明背景后加载spinner扇区同步变暗如何解决

扇区颜色变暗是因为.spinner-sector设置了mix-blend-mode: overlay，这个混合模式会和父级的背景色发生混合，你给外层.spinner-container添加半透黑色背景后，扇区的亮色就和黑色混合变暗了。

以下是几种可直接落地的解决方案，按需选择即可： #

方案1（推荐，保留原有扇区叠加效果） #

给.spinner添加isolation: isolate属性，创建独立的堆叠上下文，让mix-blend-mode只在spinner内部生效，不会和外层容器的背景混合：

.spinner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  isolation: isolate; /* 新增这一行即可 */
}

修改后三个彩色扇区之间的叠加效果不变，同时不会和外层半透黑背景混合，完全保留原本的鲜亮色彩。 #

方案2（直接取消混合模式） #

如果你不需要三个扇区叠加的混合效果，直接删除.spinner-sector规则里的mix-blend-mode: overlay即可，颜色也会恢复原本的亮度。 #

方案3（拆分遮罩层和加载元素） #

将半透黑遮罩和spinner分层，从根源避免混合：

/* 修改容器规则，移除原有背景色设置 */
.spinner-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 新增伪元素作为独立遮罩层 */
.spinner-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.4);
  z-index: 0;
}
/* 给spinner设置更高层级，放在遮罩上方 */
.spinner {
  position: relative;
  z-index: 1;
}

这个方案不需要修改混合模式相关属性，也能达到预期效果。

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