Свойство background-color
Цвет фона можно задать с помощью CSS-свойства #background-color
Напомним, что цвета в CSS можно задавать в разных форматах: в шестнадцатеричном (или HEX), в RGB или RGBA, а также с помощью цветовых констант, таких как red или green.
Более подробно о цветах можно прочитать на странице HTML Colors или в переводной статье о теории цвета на Хабре.
Вот пример использования свойства:
selector {
background-color: #ff0000;
}Свойство background-image
Фоновое изображение можно задать с помощью CSS-свойства #background-image Делается это так:
selector {
background-image: url("адрес-картинки");
}Адрес картинки обязательно заключается внутрь url("...").
Элементу можно одновременно задавать и цвет фона, и фоновую картинку. В этом случае картинка будет отображаться поверх фонового цвета.
Свойство background-repeat
По умолчанию фоновое изображение повторяется. Это хорошо заметно, когда оно меньше блока. Управлять этим поведением можно с помощью CSS-свойства #background-repeat У свойства 4 значения:
repeat— повторять во всех направлениях. Это значение по умолчанию.repeat-x— повторять только по горизонтали.repeat-y— повторять только по вертикали.no-repeat— не повторять.
Свойство background-position
Свойство #background-position управляет расположением фонового изображения. Значение свойства состоит из двух частей, разделенных пробелом: x y.
x задаёт расположение по горизонтали, а y по вертикали.
В качестве значения x можно использовать ключевые слова left, center, right, значения в процентах и в пикселях.
В качестве значения y можно использовать ключевые слова top, center, bottom, значения в процентах и в пикселях.
Примеры использования свойства:
background-position: 50% 50%;
background-position: right bottom;
background-position: 50px 100px;
background-position: 0 100%;
background-position: left bottom;Так сработают примеры:
- картинка будет по центру;
- правый нижний угол;
- отступ 50px от левого края и 100px от верхнего;
- левый нижний угол;
- левый нижний угол.
Когда фоновое изображение больше блока, то оно обрезается. Управлять тем, какую часть изображения будет видно, также можно с помощью свойства background-position.
Иногда для этого удобно использовать относительные значения (проценты), а иногда абсолютные (пиксели).
Кстати, можно использовать не только положительные, но и отрицательные значения. А также комбинировать пиксели и проценты.
Свойство background-attachment
Обычно фоновое изображение прокручивается вместе с содержимым блока. Это хорошо видно в мини-браузере. Прокрутите окно вниз и увидите, что фон поднимется наверх.
С помощью свойства #background-attachment можно зафиксировать фон на месте и он не будет перемещаться при прокручивании.
Значение свойства:
scroll— фон прокручивается вместе с содержимым. Это значение по умолчанию.fixed— фон не прокручивается, зафиксирован на одном месте.
Это тот случай, когда легче показать, чем объяснять: выполняйте задание и смотрите, как изменяется поведение фона при прокрутке.
Свойство background-size
Свойство#background-size позволяет изменять размер фонового изображения. Если фоновая картинка не совпадает по размеру с размерами блока, то при помощи этого свойства можно сделать так, чтобы она, картинка занимала всю площадь блока или, наоборот, была определённого размера.
Создадим блок и в качестве фона зададим ему красивую панораму:
`<div class="element"></div>`
.element {
height: 100vh;
background-color: #f1f1f1;
background-image: url("landscape.jpg");
background-repeat: no-repeat; }`Если не указывать свойство background-size, то будет видна только небольшая часть картинки. Но хотелось бы, чтобы фон, несмотря на его нестандартный размер, смотрелся хорошо.
Укажем свойство background-size со значением 100% 100%. По логике с таким значением фон должен занимать 100% высоты элемента и 100% ширины элемента.
Если у вас широкий монитор, то можно и не заметить подвоха, но на узких мониторах картинка будет деформироваться и сплющиваться по ширине.
Есть способ заставить картинку занять всю доступную площадь и при этом не деформироваться. Зададим background-size: cover — cover переводится с английского как «обложка».
В этой версии ещё добавлено свойство background-position со значением center, чтобы в области видимости был центр изображения.
Теперь изображение подстраивается под размеры элемента без деформации. Лишнее просто обрезается. Именно значение cover используется чаще всего для создания красивых фонов.
Свойство background-size управляет размерами картинки внутри элемента, для которого эта картинка задана фоном.
В качестве значения для свойства background-size можно задавать:
- Точный размер в любых единицах измерения, доступных в вебе.
- Проценты. Размер в процентах будет рассчитываться от размеров элемента.
- Ключевое слово
auto. Размер изображения остаётся неизменным. Кстати, это ключевое слово является значением по умолчанию. - Ключевое слово
cover. Изображение масштабируется без изменения пропорций так, чтобы закрыть фон всего элемента. Короткая сторона изображения подстраивается под соответствующую сторону элемента. А длинная сторона закрывает длинную сторону элемента, а остальное, что не попало в поле видимости, обрезается. - Ключевое слово
contain. Изображение масштабируется без изменения пропорций так, чтобы полностью поместиться в элемент.
Размеры в единицах измерения или процентах можно комбинировать с ключевым словом auto. Первое значение будет отвечать за ширину фонового изображения, а второе — за высоту.
Ключевое слово auto в случае комбинации позволяет сохранять пропорции изображения.
Свойство background
Фон элемента можно задавать с помощью отдельных свойств: background-color, background-image и так далее. Получается довольно громоздкая запись.
Также задать фон можно с помощью сокращенного свойства background, в котором через пробел перечисляются его компоненты:
background: [bc] [bi] [br] [bp] [ba];
/* Обозначения:
[bc] — background-color
[bi] — background-image
[br] — background-repeat
[bp] — background-position
[ba] — background-attachment
*/Если какой-то компонент не указан, то берется значение по умолчанию. Ниже примеры.
background: #e74c3c;
background: url("img.png") no-repeat;
background: url("img.png") 10px 20px;В первом примере просто задан цвет фона.
Во втором примере задано не повторяющееся фоновое изображение, а также по умолчанию прозрачный цвет фона, расположение в левом верхнем углу.
В третьем примере задано фоновое изображение и его расположение, а также по умолчанию прозрачный цвет фона и режим повторения во все стороны.
0011 Форматы изображений
Несколько фонов -
Несколько фонов одному элементу можно задать с помощью множественных фонов. Например:
Можно задать блоку несколько фоновых изображений одновременно. Для этого пути к изображениям в свойстве background-image или background перечисляются через запятую:
background-image: url("image-1.png"), url("image-2.png");При этом выше будет то изображение, которое находится раньше в списке: image-1.png в примере будет выше image-2.png.
Значения других свойств для множественных фоновых изображений тоже задаются через запятую. Порядок значений должен соответствовать порядку фоновых картинок. Например:
/* для первой картинки масштабирование contain, для второй — 100px */
background-size: contain, 100px;
/* для первой картинки позиционирование top, для второй — 100% */
background-position: top, 100%;Суть техники заключается в том, что мы вкладываем элементы друг в друга и делаем их одинакового размера, а затем каждому элементу задаём свой фон. То есть каждый элемент служит одним слоем фона.
Фоны вложенных элементов перекрывают друг друга: чем глубже элемент, тем выше его фон.
Кстати, для удобства ширину лучше задавать внешнему элементу (так как все вложенные будут той же ширины), а высоту самому глубокому, так как он растянет по высоте всех своих родителей.
Эффекты с повторяющимся фоном
Повторяющийся фон, тот у которого repeat, repeat-x или repeat-y, часто используется для создания интересных декоративных эффектов.
Например:
- стежки;
- зазубренные края;
- градиенты и тени.
Да, сейчас уже градиенты и тени можно делать с помощью CSS. Но иногда, когда тень или градиент достаточн о сложные, проще использовать полупрозрачный PNG.
Самое главное при создании таких эффектов — выбрать картинку с нужным периодом. Она может быть очень маленькой и даст существенную экономию веса страницы.
Попрактикуемся. Только, пожалуйста, изменяйте режим повторения после того, как пропишете фоновые изображения. Так будет нагляднее.
Спрайты
#CSS-спрайт — это одно большое изображение, в котором содержится много маленьких, как бы карта изображений. Вот живой пример (эта же картинка выведена на тёмном фоне внизу мини-браузера), который мы будем использовать в задании.
Спрайты используются, чтобы снизить количество запросов на сервер. Каждая маленькая картинка — это отдельный запрос, а чем меньше запросов, тем лучше. Поэтому маленькие картинки «склеивают» в одну большую.
Части спрайта отображают в элементах с небольшими размерами. Такому элементу задают картинку-спрайт в качестве фона и смещают её таким образом, чтобы была видна нужная её часть.
В спрайты обычно объединяют иконки и различные мелкие декоративные изображения. Кстати, есть сервисы для быстрого создания спрайтов и генерации CSS-кода для них, например, Toptal.
SVG-Спрайты
Различия форматов изображений, особенности SVG
Указываю name space svg xmlns=”http://www.w3.org/2000/svg