如何通过纯CSS修改已有及动态创建的rgba背景元素的透明度？

根据你的需求，这里有几个纯CSS的实现方案，分情况讨论：

情况1：可以修改原有样式（推荐） #

如果能调整原有元素的CSS（包括动态创建元素的样式），用CSS变量提取RGB值是最灵活的方案，后续修改颜色或透明度都非常方便：

1. 先给目标元素的基础样式定义一个RGB变量：

.yellow-bg {
  /* 提取原有RGB值为变量 */
  --yellow-rgb: 219, 219, 40;
  background-color: rgba(var(--yellow-rgb), 1);
}

2. 针对需要修改透明度的元素，只需重新引用变量并调整第四个参数：

/* 比如给需要半透明的元素加个额外class */
.yellow-bg.semi-transparent {
  background-color: rgba(var(--yellow-rgb), 0.5);
}

这样即使以后RGB颜色需要调整，只需要修改--yellow-rgb变量的值，所有相关元素都会自动更新，完全不用重复写颜色值。

情况2：无法修改原有样式（只能覆盖） #

如果原有样式是内联的（比如JS动态设置的style.backgroundColor = 'rgba(219,219,40,1)'），或者不能改动基础CSS，那可以直接覆盖背景色并保留原有RGB值，用!important提升优先级（如果是内联样式的话）：

/* 替换成你的目标元素选择器 */
.target-elements-you-want-to-change {
  background-color: rgba(219, 219, 40, 0.5) !important;
}

这种方法虽然需要重复写RGB值，但完全符合“保留原有颜色、只改透明度”的要求，而且是纯CSS实现。

情况3：不想重复写RGB值（伪元素技巧） #

如果担心以后RGB值变化导致维护麻烦，又不能修改原有样式，可以用伪元素模拟半透明背景，把原元素的背景设为透明：

.target-element {
  position: relative;
  /* 隐藏原有的不透明背景 */
  background-color: transparent !important;
  /* 确保内容在伪元素上方 */
  z-index: 1;
}
.target-element::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 使用原有RGB值，调整透明度 */
  background-color: rgba(219, 219, 40, 0.5);
  /* 把伪元素放在内容下方 */
  z-index: -1;
}

这个方法的好处是，只要原元素的内容没有设置更高的z-index，伪元素就能完美模拟背景，而且只需要写一次RGB值。

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