Добавление CSS градиента к изображению

Добавление CSS градиента к изображению

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

Добавление CSS градиента к изображению

Решение 1: выбор правильного фонового изображения

Это самый простой прием – подбирайте фотографии, на которых мало деталей либо есть обширные пустые области.

Добавление CSS градиента к изображению

Если своих подходящих фотографий нет, подобрать бесплатное (или платное) изображение можно на фотостоках вроде Adobe Stock или Unsplash.

Решение 2: редактирование фонового фото

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

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

Добавление CSS градиента к изображению

Пример редактирования изображения в Фотошопе с помощью настройки прозрачности

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

Добавление CSS градиента к изображению

Пример редактирования изображения в Фотошопе с помощью наложения цвета и уменьшения насыщенности фото

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

Доступность

Если вы обрабатываете фотографии в Фотошопе – не добавляйте текст непосредственно на изображения. Такие надписи окажутся недоступными для программ чтения экрана, которыми пользуются люди с проблемным зрением. Сайт должен быть максимально удобным для всех пользователей.

Атрибутом alt нужно пользоваться всегда, однако он предусматривает описание для самого изображения, а не текста на нем.

<img src="image.jpg" alt="описание изображения"/>

Кроме того, если изображение добавляется с помощью CSS свойств background или background-image, добавить описание фото в alt не получится. Поэтому использовать фоновые изображения таким образом не стоит:

body {
  /* сокращенная запись */
  background: url(image.jpg) no-repeat;
  /*полная запись */
  background-image: url(image.jpg);
  background-repeat: no-repeat;
}

Сокращение времени загрузки страниц с помощью CSS

Решение 3: использование CSS

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

Свойства color и text-shadow

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

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

Добавление CSS градиента к изображению

Скриншот с сервиса Codepen, где расположен код примера в HTML и CSS

Решить такую проблему можно с помощью свойства text-shadow для добавления тени к тексту:

h1, p {
  color: white;
  text-shadow: 1px 1px 3px #444;
}

Добавление CSS градиента к изображению

Скриншот с Codepen, где хранится код примера в HTML и CSS

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

Свойство background (цвет фона)

Макеты из нескольких столбцов в CSS3

Другой вариант – использовать свойство background, которое позволяет изменить как цвет шрифта, так и тон изображения. Свойство background на самом деле – сокращенная запись (shorthand) для целого набора различных свойств, но в этой статье мы будем рассматривать в основном background-color и background-image.

Начнем с использования background-color для определения цвета элемента, который будет выступать в качестве подложки текста. Свойство можно использовать с любым типом значения цвета <color> .

С помощью background-color можно задать цвет фона для любого отдельного элемента, к примеру для тегаh1, как показано ниже. Свойство также можно применить к целой группе элементов – для этого используют элемент-контейнер, к примеру, text-container div добавит белый фон под все параграфы текста сразу:

h1 {
  background-color: white;
}
.text-container {
  background-color: white;
}

Добавление CSS градиента к изображению

Скриншот примера с Codepen, где расположен полный код HTML и CSS

Чтобы фоновое изображение было видно сквозь подложку, вместо названия цвета или его HEX-кода используют настройки rgba()

/* задает цвет и степень прозрачности */
background-color: rgba(70, 130, 180, 0.8);

Свойство position

Первые три цифры от 0 до 255 задают соотношение красного, зеленого и голубого компонентов цвета. Значения разделяются запятыми. Последняя цифра задает значение для альфа-канала, и таким образом, определяет степень прозрачности. Допустимое значение лежит в диапазоне от 0 до 1; при этом 0 соответствует полной прозрачности, а единица – полностью непрозрачному цвету. Значение можно также задавать в процентах – к примеру, 0.8 соответствует 80%.

Добавление CSS градиента к изображению

Скриншот примера на Codepen с полным кодом HTML и CSS

Нужные RGB значения подбирают с помощью Фотошопа или любого онлайн-сервиса. Вот примеры удобных сервисов:

  • neilorangepeel.com – просмотр цветовых палитр и поиск названий, RGB и HEX значений нужных цветов;
  • to – конвертация любого выбранного цвета в формат RGB.

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

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

Наложение цвета с помощью background-image

Использование свойства background-image позволяют добавить цветной слой поверх всего фонового изображения. Более того, метод предусматривает:

  • использование нескольких изображений в качестве фона;
  • применение градиентной заливки;
  • совместное использование градиента и фонового изображения для создания подложки.

Синтаксис

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

background-image: url(image1.png); /* одно изображение */
background-image: url(image1.png), url(image2.png); /* два изображения */

Для создания плавного перехода между двумя и более цветами используют CSS градиент. Линейный градиент linear-gradient, использующий два цвета поверх изображения, задают таким образом:

background-image: linear-gradient(color, color), url(image.png);

Вот так этот метод выглядит на примере конкретной фоновой фотографии:

background-image: linear-gradient(rgba(0,0,0 0.2),rgba(0,0,0,0.8)),
                  url(<https://picsum.photos/id/1031/500/400>);

Здесь использовано наложение черного цвета, при этом значение rgba() обеспечивает нужную степень прозрачности. Градиентная функция нуждается как минимум в двух цветовых значениях – первое из них служит началом градиента, второе – завершением. Поскольку значения при задании этого стиля получаются достаточными длинными, для удобства чтения можно расположить их на отдельных строках. Впрочем, это вопрос личных предпочтений.

Если двухцветный градиентный переход вам не нужен, используйте одно и то же значение цвета как для начала, так и для завершения градиента – просто задайте разные значения прозрачности одного цвета.

Свойство rgba() использует скобки, и линейный градиент linear-gradient() – тоже, поэтому будьте внимательны: можно легко поставить меньше (или больше) скобок, чем нужно.

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

Наталья Кайдаавтор-переводчик статьи «How to Add a CSS Gradient Overlay to a Background Image»

Источник: www.internet-technologies.ru