css свойство цвета фона

Question

Этот синтаксис в css свойство фона работает хорошо:

 .my-element {
          background:
            linear-gradient( rgba(131,131,131,0.8), rgba(98,98,98,0.8) ),
            url('img/background.jpg')
}

Хотя мне не нужен градиент. Я бы хотел, чтобы наложение было одного цвета с некоторым уровнем непрозрачности. Я знаю, что у меня может быть только начальный цвет, совпадающий с конечным цветом градиента, но возможно ли заменить «линейный градиент» просто цветом rgba, включая непрозрачность? Это не похоже на работу.

РЕДАКТИРОВАТЬ: Я, возможно, не был ясен в моем вопросе. То, что я хотел бы, это:

.my-element {
              background:
                color(rgba(131,131,131,0.8),
                url('img/background.jpg')
    }

Выше не работает. Я не могу использовать шестнадцатеричное обозначение для цвета, так как оно не включает непрозрачность.

Answer 1

У вас есть две возможности.

Или рассмотрите переменные CSS, чтобы оптимизировать код и избежать повторения цвета дважды:

.box {
  --c:rgba(131,131,131,0.8);
  
  height:300px;
  width:300px;
  background:
    linear-gradient(var(--c),var(--c)),
    url(https://i.picsum.photos/id/1002/800/800.jpg) center/cover;
}

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

Или используйте смешивание, но у вас может быть не тот же самый результат, и вам нужно отрегулировать значение смешивания на основе используемого цвета:

.box {
  height:300px;
  width:300px;
  background:
    url(https://i.picsum.photos/id/1002/800/800.jpg) center/cover,
    rgba(131,131,131,0.8);
  background-blend-mode: exclusion;
}

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

Answer 2

Добавьте абсолютный цвет наложения:

<div class="my-element"><div class="overlay"></div>My element color</div>

И CSS:

.my-element {
    background: url('img/background.jpg')
    position: relavive;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(200, 200, 200, 0.8);
    pointer-events: none;
}

.my-element {
    background: url('img/background.jpg')
    position: relavive;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(200, 200, 200, 0.8);
    pointer-events: none;
}

<div class="my-element"><div class="overlay"></div>My element color</div>

Answer 3

Вы хотели что-то подобное?

     .my-element {
              background: linear-gradient(#e66465, #9198e5),
                url('img/background.jpg')
    }

   .my-element2 {
              background:
                linear-gradient( rgba(131,131,131,0.8), rgba(98,98,98,0.1) ),
                url('img/background.jpg')
    }

 <div class="my-element">My element color</div>
<br>
 <div class="my-element2">My element color</div>