Тонированные изображения с помощью множественных фоновых изображений

17 февраля 2019 | Опубликовано в css | Нет комментариев »

Свойству фона в CSS можно задавать значения, разделенные запятой, т. е., множественные фоновые изображения. Их можно представить как наложенные друг на друга фоны, так как у них есть порядок наложения. Если наложить прозрачный цвет на изображение, можно его затонировать. Возможно, это делается не так очевидно, как можно было бы ожидать.

Вероятно, первым предположением будет использовать просто полупрозрачный цвет и изображение, примерно следующим образом:

/* Внимание, этот способ не работает! */
.tinted-image {
  background:
    /* верхний слой, прозрачный красный */
    rgba(255, 0, 0, 0.25),
    /* нижний слой, изображение */
    url(image.jpg);
}

К сожалению, этот способ не работает. Вероятно потому, что это цвет фона, а не фоновое изображение, так что вместо использования заливки цветами с прозрачностью, такими как rgba() или hsla(), нам нужно будет использовать градиент. Технически градиенты являются фоновыми изображениями, так что применим линейный градиент с прозрачностью без переходов:

/* Работающий способ */
.tinted-image {
  background:
    /* верхний слой, прозрачный красный, созданный с помощью градиента */
    linear-gradient(
      rgba(255, 0, 0, 0.45),
      rgba(255, 0, 0, 0.45)
    ),
    /* нижний слой, изображение */
    url(image.jpg);
}