Фоны

Подкаст CSS – 053: Предыстория

Фоны

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

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

Цвет фона

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

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

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

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

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

CSS-градиентные фоны

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

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

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

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

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

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

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

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

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

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

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

Следующая демонстрация демонстрирует эти возможности свойства background-repeat :

Фоновое положение

Возможно, вы заметили, что некоторые изображения в Интернете оформлены с использованием объявления 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;

  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;

background-position: bottom 88% right 33%;

background-position: right 33% bottom 88%;

background-position: 88% 33% bottom left;

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

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

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

Следующая демонстрация демонстрирует такое поведение:

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

Размер фона

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

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

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

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

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

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

Демо, демонстрирующее применение этих ключевых слов к background-size :

Фоновое вложение

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

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

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

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

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

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

Фоновое происхождение

Свойство 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-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>?

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

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

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 ;

Проверьте свое понимание

Проверьте свои знания о CSS-фонах