Накладывающийся поверх фоновых изображений слой часто используется для создания контрастного фона для текста, и раньше он был ограничен одним цветом, иногда вместе с прозрачностью. И с этим ограничением было немного скучно. Для дизайнеров режим наложения CSS предлагает намного больше возможностей, в то же время сохраняя обратную совместимость с браузерами, которые еще не поддерживают режим наложения, например, такими как Internet Explorer.

Для начала давайте рассмотрим основной код CSS:

body {
        background-image:
        linear-gradient(90deg, rgba(197,0,0,.9) 66.6%, transparent 66.7%),
        url(spring-flowers.jpg);
        background-size: contain;
        background-blend-mode: normal;
        color: #fff;
}

Чтобы создать контраст между изображением и текстом над ним, поместим линейный градиент над фоновым изображением.  Этот градиент две трети изображения полупрозрачный, а затем резко становится прозрачным.

Чтобы добавить контрастности, к тексту применяется едва заметная тень текста:

blockquote {
  text-shadow: 3px 2px 3px rgba(0,0,0,0.3);
}

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

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

Чтобы Вы ни выбрали, важно создать приемлемую контрастность между изображением и текстом при использовании обычного режима наложения, так как именно это увидят пользователи браузера Internet Explorer и других не поддерживающих этот режим браузеров. Пользователи браузеров, поддерживающих режимы наложения, увидят улучшенную версию, рекомендуем попробовать для начала режим освещенности, который записывается в коде CSS следующим образом:

body {
    background-blend-mode: luminosity;
}

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

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание анимированных подчеркиваний для ссылок
• Использование свойства CSS тени блока
• Улучшенные рамки изображения с помощью режима наложения