如何设置背景透明度而不影响内容？

在背景色为变量的情况下设置背景透明度

对于一个背景色通过变量指定的 <div> 元素，如何不影响其内容的情况下，仅调整背景的透明度呢？本文将探讨可行的解决方案。

根据不同的场景，有以下方案：

• 使用 rgba 或 hsla 形式：
  直接使用 rgba 或 hsla 形式的色彩值，如 rgba(255, 0, 0, 0.6)。
• 使用十六进制色值：
  十六进制色值也可以同时指定透明度，例如 #0996 或 #00999966。
• 使用伪元素充当背景：
  创建一个带有透明背景farben的伪元素，并将它放置在 <div> 元素的后面，充当背景。

值得注意的是，CSS 中没有 background-opacity 属性，而使用 opacity 和 filter: opacity() 会影响到元素的整体透明度。