当背景已经设置时，有没有办法设置背景不透明度？答案

【问题标题】：Is there a way to set background-opacity when background is already set?当背景已经设置时，有没有办法设置背景不透明度？
【发布时间】：2019-05-21 16:41:46
【问题描述】：

我只想在已经设置背景的情况下设置背景不透明度。我正在使用less，我想做的事情是这样的：

{
    background: @someColorVar;
    background-opacity: 0.2;
}

比如说，@someColorVar 设置为 #0096be。

与

完全一样

{
    background: rgba(0, 150, 190, 0.2);
}

因为我不想从项目中找到继承的颜色十六进制（#0096be），并将其转换为rgba代码（0、150、190），并在其上加上不透明度。

真的很烦... 只想在继承的颜色上设置背景不透明度。

有没有办法做到这一点？

谢谢。

【问题讨论】：

标签： css opacity

【解决方案1】：

您可以将伪元素视为应用背景和不透明度的背景层：

.box {
  height: 150px;
  position: relative;
  z-index: 0;
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0096be;
  opacity: 0.2;
  z-index:-1;
}

<div class="box">
some text
</div>

【讨论】：

【解决方案2】：

您必须使用 opacity 代替 background-opacity。

{
    background-color: #0096be;
    opacity: 0.2;
}

【讨论】：

我认为这行不通，因为不透明度也会在该 DOM 中产生元素，而我想要做的只是仅设置背景不透明度......
我说你必须使用 opacity 来代替 background-opacity，因为 CSS 中没有一个 background-opacity 属性。
我知道 CSS，你的建议与我的发现无关。