Фон

В этом модуле вы узнаете, как можно стилизовать фон блоков с помощью CSS.

CSS подкаст

053: Фон

Перевод на русскийАнглийский оригинал

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

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

Цвет фона

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

Фоновые изображения

Поверх слоя background-color можно добавить фоновое изображение, используя свойство background-image. Свойство background-image принимает следующие значения:

• URL-адрес изображения или data URI с помощью CSS-функции url.
• Изображение, динамически созданное градиентной CSS-функцией.

Установка фонового изображения с помощью CSS-функции url

Градиентные фоны CSS

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

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

Демонстрация примера применения фонового изображения с помощью градиентных функций:

Повторяющиеся фоновые изображения

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

Изменить это можно с помощью свойства background-repeat с одним из следующих значений:

• repeat: Изображение повторяется в пределах доступного пространства, обрезаясь по мере необходимости.
• round: Изображение повторяется по горизонтали и вертикали, чтобы вместить как можно больше экземпляров в доступное пространство, не обрезая, не сжимая и не растягивая его.
• space: Изображение повторяется по горизонтали и вертикали, чтобы вместить максимальное количество экземпляров в доступное пространство без обрезки, при необходимости расставляя экземпляры изображения. Повторяющиеся изображения касаются краев пространства, занимаемого фоновым слоем, а между ними равномерно распределяется белое пространство.

Свойство background-repeat позволяет задавать поведение для осей x и y независимо друг от друга. Первый параметр задает поведение повтора по горизонтали, а второй — по вертикали.

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

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

Значение repeat-x повторяет изображение только по горизонтали, что эквивалентно repeat no-repeat.

Приведенный ниже демонстрационный пример демонстрирует эти возможности свойства background-repeat:

Положение фона

Вы могли заметить, что при стилизации некоторых изображений в Web с помощью объявления background-repeat: no-repeat такие изображения отображаются слева вверху от своего контейнера.

Начальное положение фоновых изображений — верхнее левое. Свойство background-position позволяет изменить это поведение путем смещения позиции изображения.

Как и свойство background-repeat, свойство background-position позволяет позиционировать изображения по осям x и y независимо друг от друга, причем по умолчанию используется два значения.

Если используются длины и проценты CSS, то первый параметр соответствует горизонтальной оси, а второй — вертикальной.

При использовании только ключевых слов порядок следования ключевых слов не имеет значения:

Хорошо

background-position: left 50%;

Хорошо

background-position: top left;

Хорошо

background-position: left top;

Порядок не имеет значения для ключевых слов, связанных с разными осями положения.

Плохо

background-position: 50% left;

Когда значения CSS используются вместе с ключевыми словами, порядок имеет значение. Первое значение представляет горизонтальную ось, а второе — вертикальную.

Плохо

background-position: left right;

Нельзя одновременно использовать ключевые слова, связанные с одной и той же осью.

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

Помимо стандартных двух и одного параметра, свойство background-position может принимать до четырех параметров;

При использовании трех или четырех параметров длина или процент CSS должны предшествовать ключевым словам top, left, right или bottom, чтобы браузер мог вычислить, от какого края блока CSS должно происходить смещение.

При использовании трех параметров длина или значение CSS может быть вторым или третьим параметром, а два других являются ключевыми словами; ключевое слово, которое следует за ним, будет использоваться для определения края, смещению которого соответствует длина или значение CSS. Смещение другого указанного ключевого слова устанавливается равным 0.

Хорошо

background-position: bottom 88% right;

Хорошо

background-position: right bottom 88%;

Плохо

background-position: 88% bottom right;

При использовании трех и более параметров перед значением длины CSS должны стоять ключевые слова top, right, bottom или left.

Хорошо

background-position: bottom 88% right 33%;

Хорошо

background-position: right 33% bottom 88%;

Плохо

background-position: 88% 33% bottom left;

При использовании трех и более параметров перед значением длины CSS должны стоять ключевые слова top, right, bottom или left.

Если background-position: top left 20% применяется к фоновому изображению CSS, то изображение размещается в верхней части блока, а значение 20% представляет собой 20%-ное смещение от левой части блока (по оси x).

Если к фоновому изображению CSS применяется параметр background-position: top 20% left, то значение 20% представляет собой 20%-ное смещение от верхней части блока CSS (по оси y), а изображение размещается в левой части блока.

При использовании четырех параметров два ключевых слова сопрягаются с двумя значениями, соответствующими смещению относительно начала каждого из указанных ключевых слов. Если к фоновому изображению применяется background-position: bottom 20% right 30%, то фоновое изображение позиционируется на 20% снизу и на 30% справа от блока CSS.

Это поведение демонстрируется в следующем примере:

Приведем еще несколько примеров использования свойства background-position с использованием сочетания значений CSS и ключевых слов:

Более подробно о нюансах, связанных с позиционированием фонов, можно узнать из статьи background-position на MDN.

Размер фона

Свойство background-size задает размер фоновых изображений; по умолчанию размер фоновых изображений определяется исходя из их собственной (реальной) ширины, высоты и соотношения сторон.

Свойство background-size использует значения длины и процента CSS или специальные ключевые слова. Свойство принимает до двух параметров, позволяющих независимо изменять ширину и высоту фона.

Свойство background-size принимает следующие ключевые слова:

• auto: При независимом использовании размер фонового изображения определяется его собственной шириной и высотой; когда auto используется вместе с другим CSS-значением ширины (первый параметр) или высоты (второй параметр), размер, установленный в auto, изменяется по мере необходимости, чтобы сохранить естественное соотношение сторон изображения. Это поведение свойства background-size по умолчанию.
• cover: Охватывает всю область фонового слоя. Это может означать, что изображение растягивается или обрезается.
• contain: Размер изображения позволяет заполнить пространство без растягивания или обрезки. В результате может остаться пустое пространство, что приведет к повторению изображения, если для параметра background-repeat не установлено значение no-repeat.

Два последних параметра предназначены для самостоятельного использования без дополнительных параметров.

В следующем демонстрационном примере показаны эти ключевые слова в действии:

Демонстрация применения этих ключевых слов к background-size:

Фиксация фона

Свойство background-attachment позволяет изменять поведение фиксированного положения фоновых изображений (изображений, входящих в состав фонового слоя) после того, как слой становится видимым на экране.

Оно принимает 3 ключевых слова: scroll, fixed и local.

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

Использование значения fixed фиксирует положение фоновых изображений относительно области просмотра.

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

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

Фоновая область

Свойство background-origin позволяет изменять область фона, связанную с конкретным блоком. Значения, принимаемые свойством, соответствуют областям border-box, padding-box и content-box блока.

Попробовать эти возможности можно с помощью следующей демонстрации:

Обрезка фона

Свойство background-clip управляет тем, что визуально видно из фонового слоя, независимо от границ, созданных свойством background-origin.

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

Свойство background-clip также принимает ключевое слово text, которое обрезает фон так, чтобы он не выходил за пределы текста в блоке содержимого. Чтобы этот эффект был заметен в тексте блока CSS, текст должен быть частично или полностью прозрачным.

Это относительно новое свойство, и на момент написания статьи Chrome и большинство браузеров требуют префикс -webkit- для использования этого свойства.

Следует также отметить, что это свойство несовместимо с одновременной установкой background-clip: text для блока CSS.

Несколько фоновых слоев

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

Несколько фонов задаются сверху вниз; первый фон находится ближе всего к пользователю, а последний — дальше всего от него.

Единственный определенный фон или последний слой обозначается браузером как финальный фоновый слой. Только этому слою разрешается назначать background-color.

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

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

background-image: url('https://assets.codepen.io/7518/pngaaa.com-1272986.png'),
    url('https://assets.codepen.io/7518/blob.svg'),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
background-size: contain, cover, auto;
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 50% 50%, 10% 50%, 0% 0%;
background-origin: padding-box, border-box, content-box;

Короткое описание фона

Для облегчения стилизации фонового слоя блока, особенно если требуется несколько фоновых слоев, существует сокращение, которое выглядит следующим образом:

background: <background-image> <background-position> /
    <background-size>? <background-repeat>
    <background-attachment> <background-origin>
    <background-clip> <background-color>?;

Внимание

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

Порядок важен при сокращенной форме объявления нескольких фонов. Значения position и size должны быть указаны оба, разделенные косой чертой (/). Объявление поведения origin и clip в правильном порядке позволяет воспользоваться преимуществами установки ключевых слов, которые действительны для обоих одновременно

В следующем объявлении фон обрезается и берется из блока содержимого:

background: url('https://assets.codepen.io/7518/blob.svg')
    50% 50% / contain no-repeat content-box;

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

background: url('https://assets.codepen.io/7518/pngaaa.com-1272986.png')
        50% 50% / contain no-repeat padding-box, url('https://assets.codepen.io/7518/blob.svg')
        10% 50% / cover border-box,
    linear-gradient(
            hsl(191deg, 40%, 86%),
            hsla(191deg, 96%, 96%, 0.5)
        ) 0% 0% / cover no-repeat content-box;

Источник — Backgrounds

Комментарии