Я думаю, вам нужно создать элемент наложения (потенциально div) с искомым полупрозрачным фоном. Что-то типа:

.overlay {
    z-index: 1;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: auto;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.7); /*can be anything, of course*/
}

И, конечно же, небольшая демонстрация: маленькая ссылка.

Используйте background-blend-mode для простого оттенка

Вы можете использовать свойство css background-blend-mode:

.background-tint {
  background-color: rgba(200,100,0,.5); /* Tint color */
  background-blend-mode: multiply;
}

Поместите его на любой элемент с фоновым изображением, и все готово.

Это свойство хорошо поддерживается в современных браузерах, НЕ включая IE 11. Для неподдерживающих браузеров вы можете использовать полифилл.

Рабочая демонстрация

Другие варианты

Используйте filter для сложного оттенка

Вы можете использовать свойство css filter:

.background-tint {
  filter: sepia(100%) saturate(200%) brightness(70%) hue-rotate(330deg);
}

Поместите его на любой элемент с фоновым изображением, и все готово. Чтобы изменить цвет, измените значение hue-rotate.

Это свойство хорошо поддерживается в современных браузерах НЕ, включая IE 11.

Рабочая демонстрация

Используйте плоский линейный градиент и множественное наложение фона

.background-tint {
  background-image: 
    linear-gradient( rgba(0,0,0,.5), rgba(0,0,0,.5) ),
    url('http://placehold.it/420')
}

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

Вы можете превратить это в миксин less или sass, что-то вроде:

less

.background-tint(@tint-color, @image-url) {
  background-image: 
    linear-gradient( @tint-color, @tint-color ),
    url( @image-url )
}

sass

@mixin background-tint($tint_color, $image_url) {
  background-image: 
    linear-gradient( $tint_color, $tint_color ),
    url( $image_url )
}

Рабочая демонстрация

Используйте прозрачный фон

.background-tint { position: relative; }

.background-tint::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
}

Преимущество этого метода заключается в том, что он работает в большинстве браузеров, и это просто хороший класс, который вы добавляете к любому элементу. Недостатком является то, что если у вас есть что-то еще внутри этого элемента, вам придется обернуть его в div с каким-то позиционированием position: relative, которое будет работать лучше всего.

Пример:

<div class="background-tint">
  <div class="u-relative">Some text here</div>
</div>

.u-relative { position: relative; }

Рабочая демонстрация

Это отлично сработало для меня:

https://css-tricks.com/tinted-images-multiple-backgrounds/

.tinted-image {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(image.jpg);
}

linear-gradient(
  fade(@brand-primary, 50%),
  fade(@brand-primary, 50%)
),

Это будет свойство overlay https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingoverlay Но это черновик. Не полагайтесь на это

Попробуйте непрозрачность:

opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */