Наложить изображение.

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

Это наложение! А вот как это делается:

.darken {
     background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,     0, 0, 0.5)), url(YOUR IMAGE HERE);
}

Поместите текст в поле.

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

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

.text-box {
   background-color: rgba(0, 0, 0, 0.5);
   color: #fff;
   display: inline;
   padding: 10px;
}

Потолок/пол — затемнение изображения.

Netflix использует технику затухания потолка, чтобы придать темный оттенок верхней части страницы. Таким образом, панель навигации всегда выделяется независимо от нижнего изображения/видео.

Вот пример того, как тренировать затухание пола. Верхнее затухание точно такое же, но вместо того, чтобы назначать градиент вниз, мы назначаем его вверх.

.floor-fade {
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) ), url(YOUR IMAGE HERE);
}

Вывод

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

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

Оставайтесь в безопасности!