Как сделать фон градиентом в css
Перейти к содержимому

Как сделать фон градиентом в css

  • автор:

Как сделать градиент фон в html

Для создания градиента фона в HTML можно использовать CSS свойство background-image .

 style="background-image: linear-gradient(to bottom, #ffffff, #000000);"> 

В данном примере создается градиент от белого ( #ffffff ) к черному ( #000000 ) по вертикали ( to bottom ).

Также можно использовать другие направления градиента, например, to right для горизонтального градиента.

Для создания радиального градиента можно использовать функцию radial-gradient() .

 style="background-image: radial-gradient(circle, #ffffff, #000000);"> 

В данном примере создается радиальный градиент от белого ( #ffffff ) к черному ( #000000 ) с центром в центре элемента ( circle ).

Также можно задавать несколько цветов для создания более сложных градиентов.

 style="background-image: linear-gradient(to bottom, #ffffff, #ff0000, #000000);" > 

В данном примере создается градиент от белого ( #ffffff ) к красному ( #ff0000 ) к черному ( #000000 ) по вертикали.

Установка фона и градиента

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

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

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

Добавление цвета фона

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

При добавлении цвета фона у нас есть несколько вариантов значений, которые мы можем использовать. Подобно другим цветовым значениям мы можем выбрать из ключевых слов, шестнадцатеричных кодов и значений RGB, RGBa, HSL и HSLa. Чаще мы встретим шестнадцатеричные значения, однако можем иногда пожелать задействовать RGBa или значения HSLa для прозрачности.

Прозрачный фон

При использовании значения RGBa или HSLa в качестве прозрачного цвета фона хорошей идеей будет обеспечить также запасной цвет, потому что не все браузеры понимают RGBa или HSLa. И когда браузер встречает значение, которое он не распознаёт, то игнорирует его.

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

Добавление фонового изображения

Кроме цвета фона элемента мы можем также добавить к нему фоновое изображение. Такие изображения работают аналогично цвету фона, однако предлагают несколько дополнительных свойств для уточнения. Как и прежде, мы можем использовать свойство background с сокращённым значением или свойство background-image напрямую. Независимо от применяемого свойства они требуют указать источник изображения с помощью функции url() .

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

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

background-repeat

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

Свойство background-repeat принимает четыре разных значения: repeat , repeat-x , repeat-y и no-repeat . repeat является значением по умолчанию и повторяет фоновое изображение по вертикали и по горизонтали.

Значение repeat-x повторяет фоновое изображение по горизонтали, в то время как значение repeat-y повторяет его по вертикали. Наконец, значение no-repeat говорит браузеру отобразить картинку один раз, то есть не повторять её вообще.

background-position

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

Свойство background-position требует два значения: горизонтальное смещение (первое значение) и вертикальное смещение (второе значение). Если указано только одно значение, то оно применяется для горизонтального смещения, а вертикальное по умолчанию задаётся как 50%.

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

Чтобы установить значение background-position мы можем использовать ключевые слова top , right , bottom и left , пиксели, проценты или любую единицу размера. Ключевые слова и проценты работают очень похоже. Значение left top идентично процентному значению 0 0, которое располагает изображение в левом верхнем углу элемента. Значение right bottom идентично процентной записи 100% 100% и будет позиционировать изображение в правом нижнем углу элемента.

Фоновые изображения позиционируются от левого верхнего угла элемента

Рис. 7.01. Фоновые изображения позиционируются от левого верхнего угла элемента

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

Значения background

Свойства background-color , background-image , background-position и background-repeat могут выступать значением для единичного свойства background . Порядок этих свойств в background может варьироваться, но обычно он такой: background-color , background-image , background-position , а затем background-repeat .

Пример фонового изображения

В следующем примере мы будем использовать свойство background , которое включает значения background-color , background-image , background-position и background-repeat .

Пожалуйста, обратите внимание, что в background-position содержится относительное и абсолютное значение. Первое значение, 20 пикселей — это горизонтальная величина, позиционирование background-image на 20 пикселей от левого края элемента. Второе значение, 50% — это вертикальная величина, которая центрирует фоновое изображение по вертикали.

Несколько других свойств и значений также включены в правила класса notice-success , чтобы установить дальнейший стиль сообщения.

.notice-success

Демонстрация фоновой картинки

На практике

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

    Начнём с большого шага и применим синий фон к элементу наряду с имеющимися свойствами color и font . Все стилевые правила для элемента , установленные на данный момент, включают следующее:

body < background: #293f50; color: #888; font: 300 16px/22px "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; >

С классом primary-header у элемента

и существующим классом primary-footer у мы можем добавить два новых правила ниже раздела со ссылками в нашем файле main.css. Первый набор правил будет выбирать все элементы внутри элемента с классом primary-header или primary-footer и установит их цвет на белый, как это определено запятой, разделяющей два отдельных селектора, у которых одно и то же свойство и значение. Второй набор правил будет выбирать те же элементы что и раньше, но поменяет их цвет на зелёный, когда пользователь наводит на них указатель.

.primary-header a, .primary-footer a < color: #fff; >.primary-header a:hover, .primary-footer a:hover
.hero

Мы также очистим некоторые стили запасных кнопок путём установки класса btn-alt . В частности, сделаем рамку у кнопки белой и добавим стиль для :hover , который включает белый фон и синий цвет текста. Со всеми дополнениями наш новый класс btn-alt должен выглядеть следующим образом:

.btn-alt < border: 1px solid #fff; padding: 10px 30px; >.btn-alt:hover
/* ======================================== Полосы ======================================== */ .row

Удивительно, как несколько фоновых цветов могут влиять на дизайн веб-сайта. Наш сайт Styles Conference становится всё краше и главная страница тому доказательство.

Главная страница сайта Styles Conference после добавления нескольких цветов фона

Рис. 7.02. Главная страница сайта Styles Conference после добавления нескольких цветов фона

Дизайн градиентного фона

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

В CSS градиентные фоны рассматриваются как фоновые изображения. Мы можем создать градиент с помощью свойства background или background-image , как обычную фоновую картинку. Значение свойства для градиента меняется в зависимости от того, какой градиент нам бы хотелось — линейный или радиальный.

Вендорные префиксы для градиента

В уроке 4, «Открываем блочную модель», мы обсуждали добавление вендорных префиксов к новым свойствам или значениям CSS, так что браузеры могут поддерживать недавно разработанные возможности CSS. Градиенты были одними из значений, которые требовали использование префиксов. К счастью, для большинства браузеров отпала необходимость в префиксах для отображения градиентов, тем не менее, всё равно стоит указать префиксы для обеспечения лучшей поддержки.

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

Линейный градиент

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

Демонстрация линейного градиента

Линейные градиенты определяются с помощью функции linear-gradient() в свойстве background или background-image . Функция linear-gradient() должна включать в себя два значения цвета, первое из которых будет начальным цветов, а второе конечным цветом. Браузер затем обработает переход между двумя цветами.

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

Смена направления градиента

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

Например, если мы хотим, чтобы градиент в элементе двигался слева направо, мы можем использовать значение to right для указания направления, в котором линейный градиент должен продвигаться. Ключевые слова также могут быть объединены. Если мы хотим, чтобы градиент переходил от левой верхней до правой нижней части элемента, мы можем использовать значение ключевого слова to right bottom .

Демонстрация направления линейного градиента

Когда мы применяем диагональный градиент в не совсем квадратном элементе, градиент не переходит напрямую из одного угла в другой. Вместо этого градиент определит абсолютный центр элемента, поместит опорные точки в противоположных углах, откуда он должен продвигаться и только затем двинется в направлении угла, заданном в значении. Эти углы, которые перемещает градиент, называются «волшебные уголки», так как они не являются абсолютными. Эрик Мейер проделал замечательную работу с изложением этого синтаксиса в своей статье Linear Gradient Keywords.

Кроме ключевых слов также допускаются углы. Если мы хотим, чтобы наш градиент двигался к левой верхней части элемента мы можем использовать значение угла 315deg, также если мы хотим, чтобы наш градиент двигался к правой нижней части элемента, мы можем использовать значение 135deg. Этот же подход может быть применён для любого значения угла, от 0 до 360º.

Радиальный градиент

В то время как линейный градиент идеально подходит для градиентного перехода от одного направления к другому, часто возникает необходимость в радиальном градиенте. Радиальные градиенты работают так же, как линейные и повторяют большинство из тех же значений. Для радиальных градиентов вместо функции linear-gradient() в свойстве background или background-image мы будем использовать функцию radial-gradient() .

Демонстрация радиального градиента

Радиальные градиенты работают изнутри наружу элемента. Таким образом, первый цвет заданный в функции radial-gradient() будет располагаться в абсолютном центре элемента, а второй цвет будет находиться на внешней стороне элемента. Браузер затем создаст переход между этими двумя цветами.

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

Генератор градиентов CSS3

Ручная работа с градиентами может быть порой довольно трудной, особенно если вы начинающий. К счастью, появилось несколько генераторов градиентов CSS3. Каждый генератор работает немного по-своему и некоторые предоставляют больше возможностей, чем другие. Если вы заинтересовались, я рекомендую покопаться и найти подходящий генератор для ваших нужд.

Стоп-цвета

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

Демонстрация стоп-цветов в градиенте

По умолчанию браузер будет позиционировать каждый стоп-цвет на равном расстоянии от следующего и переходить между ними соответственно. Если требуется больше контроля над тем, как желательно расположить цвета, то их места в градиенте могут быть определены для каждого цвета. Место должно быть объявлено как значение размера и идёт после значения цвета.

Позиционирование стоп-цветов в градиенте

Если не указано иное, то первый цвет будет позиционироваться на 0%, а последний цвет на 100%.

Пример градиента

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

Для этого мы включим два свойства background . Первое свойство background определяет шестнадцатеричное значение однотонного цвета, который служит в качестве запасного варианта на случай, если браузер не поддерживает линейные градиенты. Второе свойство background включает в себя функцию linear-gradient() , которая задаёт зелёный градиент, который переходит от верхней части элемента к его нижней части.

.notice-success

Демонстрация градиентного фона

На практике

С имеющимся набором градиентов давайте создадим новую полосу для нашего сайта Styles Conference, на этот раз с помощью градиента.

    Мы сделаем новую полосу с градиентом с помощью класса row-alt . Поскольку для новой полосы задано то же свойство и значение min-width что и для класса row , мы объединим эти два селектора.

.row, .row-alt

Далее мы хотим создать новый набор правил и применить стили специально к классу row-alt . Эти новые стили будет включать в себя градиентный background , который начинается с зелёного цвета и переходит к жёлтому, слева направо. Используя функцию linear-gradient() с соответствующими значениями и вендорными префиксами, мы добавим градиентный background для класса row-alt . Также включим один background перед градиентным background как запасной вариант, на тот случай, если браузер не поддерживает градиенты. Наконец, мы также добавим и некоторый вертикальный padding . Наш обновлённый раздел теперь выглядит следующим образом:

.row, .row-alt < min-width: 960px; >.row < background: #fff; padding: 66px 0 44px 0; >.row-alt
Спикеры

Мы рады приветствовать более двадцати спикеров, готовых представить новейшие технологии в отрасли. Готовьтесь к вдохновляющей феерии.

/* ======================================== Вступление ======================================== */ .lead < text-align: center; >.lead p

Внутренние страницы нашего сайта Styles Conference уже получили давно назревшую любовь в виде градиента для вступления. Убедитесь, что вы обновили код для всех внутренних страниц и видите их новое улучшенное содержимое, заголовки и абзацы.

Страница Спикеры сайта Styles Conference, в комплекте с градиентом

Рис. 7.03. Страница Спикеры сайта Styles Conference, в комплекте с градиентом

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Использование нескольких фоновых изображений

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

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

Данный код использует сокращённое значение для свойства background , связывая несколько фоновых картинок вместе. Эти сокращённые значения также могут быть разбиты по свойствам background-image , background-position и background-repeat со значениями, разделёнными запятыми.

Пример нескольких фоновых изображений

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

Чтобы сделать это, мы включим два значения во второе свойство background . Первое значение будет картинкой галочки на переднем плане. Второе значение будет линейным градиентом на заднем плане. Эти два значения разделяются запятой.

.notice-success

Демонстрация нескольких фоновых изображений

Изучаем новые свойства фона

Наряду с градиентами и несколькими фоновыми изображениями, CSS3 представил три новых свойства: background-size , background-clip и background-origin .

Свойство background-size позволяет изменить размер фонового изображения, в то время как свойства background-clip и background-origin позволяют контролировать, как фоновое изображение обрезается и где фоновое изображение располагается в элементе (внутри border или внутри padding , например).

background-size

Свойство background-size позволяет указать размер фонового изображения. Это свойство принимает несколько значений, в том числе размер и ключевые слова.

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

Следовательно, свойство background-size с шириной 100% установит, что фоновое изображение занимает всю ширину элемента. Если второе значение не определено после ширины, то значение высоты будет задано автоматически, чтобы сохранить пропорции фонового изображения.

Ключевое слово auto может быть задействовано в качестве значения ширины или высоты, чтобы сохранить пропорции фонового изображения. Так, если мы хотим установить высоту фоновой картинки на 75% от высоты элемента при сохранении её пропорций, то можем задать значение background-size как auto 75% .

Демонстрация background-size

Ключевые слова cover и contain

В дополнение к размерам свойство background-size также допускает ключевые слова cover и contain .

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

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

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

background-clip и background-origin

Свойство background-clip определяет площадь поверхности, которую охватывает фоновое изображение, а свойство background-origin определяет, откуда должно начинаться background-position . Внедрение этих двух новых свойств связано с внедрением трёх новых значений: border-box , padding-box и content-box . Каждое из этих трёх значений может быть использовано для свойств background-clip и background-origin .

Значение свойства background-clip по умолчанию устанавливается как border-box , что позволяет фоновому изображению расширяться в область границ. Между тем, свойство background-origin по умолчанию устанавливается как padding-box , что позволяет фоновому изображению начинаться там же, где и padding у элемента.

Значение border-box расширяет фон до границ элемента

Рис. 7.04. Значение border-box расширяет фон до границ элемента

Рис. 7.05. Значение padding-box расширяет фон до padding у элемента, но фон при этом находится внутри границ

Рис. 7.06. Значение content-box содержит фон внутри padding и border у элемента

Мы уже обсуждали значения этих ключевых слов, когда рассматривали свойство box-sizing в уроке 4, «Открываем блочную модель». Смысл самих значений не изменился, но их функции меняются при использовании разных свойств фона.

Резюме

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

Кратко, в этом уроке мы рассмотрели следующее:

  • как добавить цвет фона и фоновое изображение к элементам;
  • линейные и радиальные градиенты и их настройка;
  • как задать несколько фоновых изображений для одного элемента;
  • новые свойства CSS3, которые позволяют менять размер, площадь поверхности и область позиционирования фоновых изображений

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

Ресурсы и ссылки

  • CSS3 Linear Gradients via Dev.Opera
  • CSS3 Radial Gradients via Dev.Opera
  • CSSmatic Gradient Generator
  • CSS3 Files Background

См. также

  • background
  • background-origin
  • background-position
  • background-size
  • Анимация ссылок при наведении
  • Градиенты в CSS
  • Градиенты у
  • Линейный градиент
  • Масштабирование фона
  • Несколько фоновых картинок
  • Оформление кнопок
  • Радиальный градиент
  • Спрайты
  • Фон в CSS
  • Фоновая картинка
  • Функция linear-gradient()
  • Функция radial-gradient()

Как сделать градиент поверх картинки?

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

.header < height: 670px; width: 100%; background-image: url(../img/header_bg.png); background: linear-gradient(to right, rgba(9, 5, 47, .85) 0%, rgba(49, 29, 94, .85) 100%); >

Отслеживать
22.4k 11 11 золотых знаков 56 56 серебряных знаков 121 121 бронзовый знак
задан 14 окт 2016 в 13:44
PolonskiyP PolonskiyP
239 2 2 золотых знака 5 5 серебряных знаков 13 13 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

linear-gradient — это изображение, поэтому изображения (фон и градиент) надо прописывать через запятую

.header < height: 670px; width: 100%; background-image: linear-gradient(to right, rgba(9, 5, 47, .85) 0%, rgba(49, 29, 94, .85) 100%), url(../img/header_bg.png); >

Далее, если я правильно понял про вопрос суть с текстом, то:

Создаете блок и присваиваете ему такой класс, заполняя текстом, пример:

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris enim enim, semper sed libero placerat, venenatis eleifend velit. Aliquam imperdiet nunc in libero condimentum viverra. Quisque eu est et mauris pellentesque vulputate. Curabitur posuere sollicitudin urna id malesuada. Vivamus tincidunt tristique diam, id porttitor neque tempor at. Quisque eget enim in tortor scelerisque vehicula vel eget justo. Nunc rutrum iaculis tortor at porttitor.

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

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

Обновлено: 2023-07-01 20:09:31 Наталья Кайда автор материала

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

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

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

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

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

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

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

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

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

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

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

Доступность

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

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

описание изображения

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

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

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

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

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

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

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

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

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

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

h1, p

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

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

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

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

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

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

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

h1 < background-color: white; >.text-container

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

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

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

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

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

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

Скриншот примера на 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();

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *