如何用JavaScript实现同时含teamA与teamB类的Div背景色混合？

首先要纠正你原代码的问题：getElementsByClassName 返回的是 HTMLCollection（类数组集合），不能直接通过 .style 设置样式，必须遍历集合中的每个元素操作。

接下来针对同时拥有 teamA 和 teamB 类的元素，有两种可靠实现混合背景的方式：

方式1：手动计算混合RGBA颜色值 #

通过颜色混合公式计算两种半透明色叠加后的最终颜色，直接给双重类元素设置该颜色：

// 仅给单个teamA类的元素设置蓝色背景
document.querySelectorAll('.teamA:not(.teamB)').forEach(el => {
  el.style.backgroundColor = "rgba(0, 0, 255, 0.3)";
});

// 仅给单个teamB类的元素设置红色背景
document.querySelectorAll('.teamB:not(.teamA)').forEach(el => {
  el.style.backgroundColor = "rgba(255, 0, 0, 0.3)";
});

// 给同时拥有两个类的元素设置混合后的紫色背景
document.querySelectorAll('.teamA.teamB').forEach(el => {
  // 基于RGBA混合公式计算最终颜色
  const a1 = 0.3, a2 = 0.3;
  const r = Math.round((0 * a1 + 255 * a2 * (1 - a1)) / (a1 + a2 * (1 - a1)));
  const g = Math.round((0 * a1 + 0 * a2 * (1 - a1)) / (a1 + a2 * (1 - a1)));
  const b = Math.round((255 * a1 + 0 * a2 * (1 - a1)) / (a1 + a2 * (1 - a1)));
  const finalAlpha = a1 + a2 * (1 - a1);
  
  el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${finalAlpha})`;
});

方式2：利用CSS背景混合模式（无需计算） #

通过设置多层背景，并使用CSS的 backgroundBlendMode 属性让浏览器自动混合颜色，效果更灵活：

// 仅给单个teamA类的元素设置蓝色背景
document.querySelectorAll('.teamA:not(.teamB)').forEach(el => {
  el.style.backgroundColor = "rgba(0, 0, 255, 0.3)";
});

// 仅给单个teamB类的元素设置红色背景
document.querySelectorAll('.teamB:not(.teamA)').forEach(el => {
  el.style.backgroundColor = "rgba(255, 0, 0, 0.3)";
});

// 给双重类元素设置双层背景并启用混合
document.querySelectorAll('.teamA.teamB').forEach(el => {
  // 同时设置两个背景色层
  el.style.background = "rgba(0, 0, 255, 0.3), rgba(255, 0, 0, 0.3)";
  // 选择混合模式，可根据需求替换为multiply/screen/overlay等
  el.style.backgroundBlendMode = 'multiply';
});

你可以尝试不同的 backgroundBlendMode 值，得到不同的混合视觉效果。

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