Есть ли способ установить прозрачность фона, когда фон уже установлен?

Question

Я хочу установить непрозрачность фона, только когда фон уже установлен.Я использую less, и я хочу сделать что-то вроде этого:

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

, где, скажем, @someColorVar установлен на # 0096be.

, что точно так же, как

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

, так как я не хочу находить унаследованный шестнадцатеричный цвет (# 0096be) из проекта, преобразовывать его в код rgba (0, 150, 190) и накладывать на него прозрачность.

Это действительно раздражает ... Просто хочу установить непрозрачность фона для унаследованного цвета.

Есть ли способ добиться этого?

Спасибо.

Answer 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>

Answer 2

Вы должны использовать непрозрачность вместо непрозрачности фона.

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