html - 指定背景不透明度而不指定颜色

Question

如何在不更改现有背景色的情况下指定background-color 的不透明度？

例如，考虑:

div {
  width: 100px;
  height: 100px;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.light {
  background-color: rgba(?, ?, ?, 0.9) /* <--- what do I use here? */
}

<div class="blue"></div>
<div class="green"></div>
<div class="blue light"></div>
<div class="green light"></div>

我可以在 div.light 中提供什么值来更改不透明度而不覆盖/更改绿色/蓝色？类似于 background-alpha 或 background-opacity(不存在)

编辑:我根本不想改变 div contents 的不透明度；只是背景。

编辑:我知道有涉及添加 DOM 的解决方案，但这违背了设计最佳实践(不要使用 DOM 进行样式设置)，我的目标是仅使用 CSS 的解决方案。

Answer 1

您可以为背景使用伪元素并使用 opacity

div.blue::before {
  background-color: blue;
}

div.green::before {
  background-color: green;
}

div.light::before {
  background-color: rgba(?, ?, ?, 0.9)
}

div::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
}

div {
  position: relative;
}

.light::before {
  opacity: .5;
}

<div class="blue">blue</div>
<div class="green">green</div>
<div class="blue light">blue light</div>
<div class="green light">green light</div>