Как добавить наложение на фоновое изображение?

Я много видел этот вопрос как в SO, так и в Интернете. Но ни один из них не был тем, что я ищу.

Как добавить наложение цвета на фоновое изображение, используя только CSS?

Пример HTML:

<div class="testclass">
</div>

Пример CSS:

.testclass {
    background-image: url("../img/img.jpg");
}

Пожалуйста, обратите внимание:

  • Я хочу решить эту проблему, используя только CSS. т.е. я не хочу добавлять дочерний div в div "testclass" для наложения цвета.

  • Это не должен быть "эффект наведения", я просто хочу добавить цветовой фон к фоновому изображению.

  • Я хочу иметь возможность использовать непрозрачность, то есть я ищу решение, которое позволяет цвет RGBA.

  • Я ищу только один цвет, скажем, черный. Не градиент.

Это возможно? (Я был бы удивлен, если нет, но я не смог ничего найти по этому поводу), и если так, каков наилучший способ достичь этого?

Все предложения и советы приветствуются!

Ответы

Ответ 1

Я вижу 2 простых варианта:

  • многократный фон с прозрачным единственным градиентом по изображению
  • Hudge Inset Shadow

опция градиента:

html {
  min-height:100%;
  background:linear-gradient(0deg,rgba(255,0,150,0.3),rgba(255,0,150,0.3)),url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
  }

Ответ 2

Вы можете использовать псевдоэлемент для создания наложения.

.testclass {
  background-image: url("../img/img.jpg");
  position: relative;
}
.testclass:before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  background: rgba(0,0,0,.5);
}

Ответ 3

background-image принимает несколько значений.

поэтому комбинация только одного цветового линейного градиента и css blend modes сделает трюк.

.testclass {
    background-image: url("../images/image.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
    background-blend-mode: overlay;
}

Обратите внимание, что поддержки IE/Edge для blend-режимов CSS вообще нет.

Ответ 4

Попробуйте это, это просто и понятно. Я нашел это отсюда: https://css-tricks.com/tinted-images-multiple-backgrounds/

.tinted-image {

  width: 300px;
  height: 200px;

  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}

Ответ 5

Вы можете добавить оттенок

Html  (<div class=tint>img src chose picture of what color overlay you want</div>)

Css (.tint img{"tranparrent:50%;"}) ****