Зафиксировать фон css: background-attachment | htmlbook.ru

div style background image — Все о Windows 10

На чтение 5 мин. Просмотров 100 Опубликовано 15.12.2019

Для любого элемента в документе можно установить фоновое изображение используя CSS свойство: background-image .

Возможные значения свойства background-image :

• url — абсолютный или относитльный путь к файлу с изображением.
• none — изображение отсутствует, это значение по умолчанию.

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

Если фоновое изображение не заполняет собой всё пространство элемента, то он выкладывается «плиткой».

Фиксация фонового изображения

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

Фоновое изображение можно зафиксировать. Для этого в CSS применяется свойство background-attachment . По умолчанию его значение равно scroll (прокрутка или подвижный фон).

То есть прошлый пример полностью аналогичен следующему:

Чтобы зафиксировать фоновое изображение свойству background-attachment нужно назначить значение fixed . Исправим предыдущий пример и посмотрим как он будет работать:

Значения scroll и fixed для свойства background-attachment были в версии CSS2.1. В спецификации CSS3 появилось дополнительное значение для этого свойтва — local .

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

На этом тема фиксации фоновых изображений в рамках этой статьи закрыта.

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

Выше в статье писалось, фоновый рисунок повторяется «плиткой», если не занимает всей площади блока. Управлять вариантами повторений фонового изображения можно при помощи свойства background-repeat . Возможные значения этого свойства:

• repeat — фоновый рисунок повторяется «плиткой» (значение по умолчанию).
• no-repeat — фоновый рисунок не повторяется, показывается только один раз.
• repeat-x — повторять изображение только по горизонтали.
• repeat-y — повторять изображение только по вертикали.

Теперь тот же самый пример, только повторим изображение по вертикали.

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

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

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

Позиционирование по горизонтали:

• left — расположить слева.
• center — расположить по центру.
• right — расположить справа.

Позиционирование по вертикали:

• top — расположить сверху.
• center — расположить по центру.
• bottom — расположить снизу.

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

Свойство background

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

• background-color — работа с этим свойством подробно описана в статье «Цвета в CSS»
• background-attachment
• background-image
• background-position
• background-repeat

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

Краткая информация

Версии CSS

Описание

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

Синтаксис

Значения

HTML5 CSS2.1 IE Cr Op Sa Fx

Объектная модель

[window.]document.getElementBy >elementID «).style.backgroundImage

Браузеры

Internet Explorer до версии 7.0 включительно применяет фон к внутренней части границы элемента, у которого установлено свойство hasLayout . Если у элемента нет hasLayout , свойство background-image будет учитывать границы элемента, как это и задано в спецификации. Разница в отображении будет заметна, если границы пунктирные ( dashed или dotted ), а не сплошные.

Если для элемента значение overflow установлено как scroll или auto , в Internet Explorer 8 будет вертикальная задержка в один пиксел при прокрутке фона.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Если фон задаётся для строки таблицы (тег

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера в браузере Chrome показан на рис. 1. Браузер Internet Explorer, Opera и Firefox корректно отображают фон для строки (рис. 2).

Is it possible to make a

8 Answers 8

You can do that using CSS’s background propieties. There are few ways to do it:

By ID

HTML:

CSS:

By Class

HTML:

CSS:

In HTML (which is evil)

HTML:

Where:

• color is color in hex or one from X11 Colors
• path is path to the image
• others like position, attachament

background CSS Property is a connection of all background-xxx propieties in that syntax:

background: background-color background-image background-repeat background-attachment background-position;

CSS свойство background-attachment — Как создать сайт

CSS справочник

Определение и применение

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

Поддержка браузерами

CSS синтаксис:

background-attachment: "scroll | fixed | local | initial | inherit";

JavaScript синтаксис:

object.style.backgroundAttachment = "scroll"

Значения свойства

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства background-attachment</title>
<style> 
.primerFixed {
height:400px; /* высота элемента */
background-image:url('/images/smile.png'); /* путь к фоновому изображению */
background-attachment:fixed; /* фон фиксируем относительно уровня просмотра */
background-position:center; /* позиционируем фоновое изображение */
background-repeat:no-repeat; /* отключаем повтор фонового изображения по осям */
}
</style>
</head>
	<body>
		<div class = "primerFixed"></div>
		<div style = "height:600px"></div>
	</body>
</html>

В этом примере мы создали 2 блочных элемента <div>, к первому элементу мы применили стили, которые позволяют указать высоту блока (свойство height), фоновое изображение (background-image), указать, что оно будет статическим (background-attachment), спозиционировать его по центру (background-position) и отключить повторение фонового изображения по осям X и Y (background-repeat). Обращаю Ваше внимание, что вы можете указать все свойства для фона элемента в одном объявлении с использованием универсального свойства background).

Второй элемент представляет из себя пустой блок высотой 600px, он позволит нам продемонстрировать параллакс эффект за счёт прокрутки страницы. Обратите внимание, что наше изображение (первый блок) остается на одном месте и не прокручивается вместе со страницей.

CSS справочник

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Твитнуть

Поделиться

Свойства css

Фиксированный эффект фона при прокрутке

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

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

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

Шаг 1. HTML

HTML-структура является довольно простой: каждый раздел содержит .content элемент с названием и пунктом. Классы .img-1 , .img-2 и т.д., используется для установки различных фоновых изображений в CSS:

А .cd-vertical-nav является элементом навигационной стрелки (виден только на больших устройствах). Типы данных были использованы для идентификации в jQuery секциях.

Шаг 2. CSS

Пара важных вещей, чтобы иметь в виду: устройства IOS не нравится свойство background-attachment: fixed; Поэтому на устройствах с маленьким экраном фиксированной фон эффекта не будет виден. Кроме того, на небольших устройствах мы не используем CSS для фоновых изображений, но мы вводим не большие фотографии телефонов, а также ::after для псевдо-элементов и .cd-content элемента.

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

Шаг 3. JS

Мы использовали JQuery для реализации основного ползунка для навигации по различным разделам (предыдущий / следующий стрелки и навигации клавиатуры). В окне прокрутки, мы обновляем (стрелки видимости функцией checkNavigation ()). В  nextSection () и prevSection ()  будут использоваться функции для перехода к следующему / предыдущему разделу.

Вот и все. Готово!

Читайте также:

background-attachment — CSS: каскадные таблицы стилей

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

 
вложение фона: прокрутка;
background-attachment: исправлено;
фоновая привязка: локальная;


фоновое прикрепление: наследование;
фон-привязка: начальная;
фоновое вложение: вернуться;
background-attachment: отключено;
  

Свойство background-attachment указано как одно из значений ключевого слова из списка ниже.

Значения

фиксированные

Фон фиксируется относительно области просмотра. Даже если у элемента есть механизм прокрутки, фон не перемещается вместе с элементом. (Это несовместимо с background-clip: text .)

местный

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

свиток

Фон фиксируется относительно самого элемента и не прокручивается вместе с его содержимым. (Он фактически прикреплен к границе элемента.)

Простой пример

HTML

  

  Вокруг холла были двери, но все они были заперты; и когда
  Алиса спустилась с одной стороны на другую, пробуя все
  дверь, она грустно пошла посередине, гадая, как она вообще могла
  выйти снова.
  

CSS

  п {
  фоновое изображение: url ("starsolid.gif");
  background-attachment: исправлено;
}
  

Результат

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

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

HTML

  

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

  

CSS

  п {
  фоновое изображение: url ("starsolid.gif "),
      url ("startransparent.gif");
  фоновое прикрепление: фиксированное, прокрутка;
  фон-повтор: нет-повтор, повтор-у;
}
  

Результат

Таблицы BCD загружаются только в браузере

Как указать фиксированное фоновое изображение в CSS?

< html >

< тип головы >

000 000 000 000 9000 "text / css" >

h2 {

выравнивание текста: по центру;

}

#ex {

выравнивание текста: по центру;

background-image:

background-position: center;

фоновый повтор: без повтора;

Крепление фона: фиксированное;

}

стиль >

головка >

000

000

000

000

000

< h2 > Пример фиксированного фонового изображения h2 >

< div id = =

< p >

Абзацы являются строительными блоками

документов.Многие студенты определяют

абзаца с точки зрения длины:

абзаца - это группа из не менее

пяти предложений,

>

< br > < br >

p p полстраницы,

и т. д.На самом деле, однако, единство

и согласованность идей среди

предложений составляют абзац

.

p >

< br > < br > 000

000

000

000

000

000 >

Абзац определяется как «группа

предложений или одно предложение

, которое образует единое целое» (Lunsford и 9000ors5 116).

p >

< br > < br

000

000 000

000 000

000 >

Длина и внешний вид не определяют, является ли раздел в

абзацем.

p >

< br > < br > 000

000

000

000

000 >

Например, в некоторых стилях письма

, особенно журналистских стилях

, абзац может состоять всего лишь из

.В конечном итоге абзац

- это предложение или группа из

предложений, которые поддерживают одну основную идею.

p >

< br > < br > 000

000

000

000

000

000 >

В этом раздаточном материале мы будем называть эту

«идею управления», потому что она

контролирует то, что происходит в остальных

п.

p >

div >

000/ 0007

0007 html >

CSS Фоновое изображение с фиксированной позицией

Фоны стали неотъемлемой частью создания веб-сайтов в стиле Web 2.0, так как градиенты вошли в моду.Если вы думаете, что градиентный фон слишком банален, может быть, вам подойдет фон с фиксированным положением? Он действительно обеспечивает аккуратный неотъемлемый эффект, не двигаясь.

CSS

Разместите объявление фона выбранного элемента.

 body {background: url (your-image.jpg) вверху справа без повтора; background-attachment: исправлено; } 

background-attachment: fixed сохраняет фоновое изображение на месте, пока элемент достаточно высок для прокрутки.

• Создание анимации перелистывания CSS

  CSS-анимация - это очень весело; их прелесть в том, что с помощью множества простых свойств вы можете создать что угодно, от элегантного плавного перехода до эффекта WTF-Pixar, которым можно гордиться. Один из эффектов CSS где-то посередине - это эффект переворота CSS, в результате чего есть...

• Запись выделения текста с помощью MooTools или jQuery AJAX

  Один из приемов, которые я использую все чаще и чаще в наши дни (например, CNNSI.com), - это запись выделенного текста AJAX. Это имеет смысл - если вы обнаружите, что пользователи выбирают эти термины снова и снова, вы, вероятно, можете предположить, что ваши посетители ищут этот термин в Google ...

• Изменение размера изображения с помощью Canvas, Drag and Drop и File API

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

замену обложки для Mobile Safari

CSS background-size: замена обложки для Mobile Safari

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

Очевидно, background-size: cover неожиданно ведет себя на устройствах iOS. Я видел несколько примеров того, как это исправить, но я не могу заставить их работать в моей ситуации.В идеале я бы предпочел не добавлять в HTML лишние теги , но если это единственный способ, я это сделаю.

Вот мой код:

  .section {
  маржа: 0 авто;
  положение: относительное;
  отступ: 0 0 320 пикселей 0;
  ширина: 100%;
}

#секция 1 {
  фон: url (...) 50% 0 исправлено отсутствие повтора;
  размер фона: обложка;
}

# section2 {
  фон: url (...) 50% 0 исправлено отсутствие повтора;
  размер фона: обложка;
}

# section3 {
  фон: url (...) 50% 0 исправлено отсутствие повтора;
  размер фона: обложка;
}  

  <тело>
  

    ...
  
  

    ...
  
  

    ...
  
   

Вопрос в том, как я могу заставить фоновое изображение полностью покрыть раздел div с учетом переменной ширины браузера и переменной высоты содержимого в div?

Ответ № 1:

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

Мое решение по-прежнему остается чистым резервным вариантом CSS

http: // css-tricks.com / perfect-full-page-background-image / как три отличных метода, последние два являются резервными на случай, когда покрытие CSS3 не работает.

HTML

УСС

  #bg {
  положение: фиксированное;
  верх: 0;
  слева: 0;

  / * Сохранить соотношение сторон * /
  минимальная ширина: 100%;
  минимальная высота: 100%;
}
  

Ответ № 2:

Недавно у меня была похожая проблема, и я понял, что это не из-за background-size: cover , а из-за background-attachment: fixed .

Я решил проблему, используя медиа-запрос для iPhone и установив для свойства background-attachment значение scroll .

Для моего случая:

  .cover {
    размер фона: обложка;
    background-attachment: исправлено;
    background-position: center center;

    @media (max-width: @ iphone-screen) {
        вложение фона: прокрутка;
    }
}
  

Edit: блок кода находится в LESS и предполагает предварительно определенную переменную для @ iphone-screen .Спасибо за уведомление @stephband.

Ответ № 3:

Также размещено здесь: "background-size: cover" не закрывает экран мобильного телефона

Работает на Android 4.1.2 и iOS 6.1.3 (iPhone 4) и переключается на настольный компьютер. Написано для отзывчивых сайтов.

На всякий случай в твоей HTML-голове примерно так:

HTML:

CSS:

  html {
    /* Что вы хотите */
}
.html-mobile-background {
    положение: фиксированное;
    z-индекс: -1;
    верх: 0;
    слева: 0;
    ширина: 100%;
    высота: 125%; / * Чтобы компенсировать пространство в адресной строке мобильного браузера * /
    фон: url (/images/bg.jpg) без повтора;
    размер фона: 100% 100%;
}

@media (min-width: 600 пикселей) {
    html {
        фон: url (/images/bg.jpg) центральный центр без повтора исправлен;
        размер фона: обложка;
    }
    .html-mobile-background {
        дисплей: нет;
    }
}
  

Ответ № 4:

В сети есть ответы, которые пытаются решить эту проблему, однако ни один из них не работал у меня правильно.Цель: поместить фоновое изображение на тело и получить background-size: cover; рабочий мобильный, без медиа-запросов, переполнения или хакерский z-index: -1; позиция: абсолютная; накладок.

Вот что я сделал, чтобы решить эту проблему. Он работает в Chrome на Android, даже если панель клавиатуры активна. Если кто-то захочет протестировать iPhone, это было бы круто:

  кузов {
    фон: #FFFFFF url ('../ image / something.jpg') фиксированный верхний центр без повтора;
    размер фона: обложка;
    -webkit-background-size: обложка; / * это может понадобиться сафари * /
}
  

Вот и волшебство.Относитесь к html как к оболочке с заданной высотой по отношению к фактическому окну просмотра. Вы знаете классический отзывчивый тег ? Вот почему используется vh . Кроме того, на первый взгляд может показаться, что body должен соответствовать этим правилам, и он может выглядеть нормально ... до изменения высоты, например, когда клавиатура открывается.

  html {
    высота: 100вх; / * устанавливаем ограничение области просмотра * /
    минимальная высота: 100%; / * установить высоту * /
}
  

Ответ № 5:

Это правильный код размера фона:

Ответ № 6:

Для версий Safari < 5.1 свойство css3 background-size не работает.В таких случаях вам понадобится webkit .

Итак, вам нужно использовать атрибут -webkit-background-size , чтобы указать размер фона .

Следовательно, используйте -webkit-background-size: cover .

Ссылка - Версии Safari с использованием webkit

Ответ № 7:

Я нашел следующее на сайте Стивена Гилберта - http://stephen.io/mediaqueries/. Он включает дополнительные устройства и их ориентацию.Работает для меня!

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

  / * iPad в книжной и альбомной ориентации * /
@media only screen и (min-device-width: 768px) и (max-device-width: 1024px) {/ * СТИЛИ ИДЕТ ЗДЕСЬ * /}

/ * iPad в альбомной ориентации * /
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (Ориентация: альбомная) {/ * СТИЛИ ИДЕТ ЗДЕСЬ * /}

/ * iPad в портретной ориентации * /
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (Ориентация: портрет) {/ * СТИЛИ ИДЕТ ЗДЕСЬ * /}
  

Ответ 8:

  @media (max-width: @ iphone-screen) {
  фоновое прикрепление: наследование;
  размер фона: обложка;
  -webkit-background-size: обложка;
}
  

Ответ № 10:

  html body {
  фон: URL (/ assets / images / header-bg.jpg) исправлен верхний центр без повтора;
  ширина: 100%;
  высота: 100%;
  минимальная ширина: 100%;
  минимальная высота: 100%;

  -webkit-background-size: авто авто;
  -moz-background-size: авто авто;
  -o-background-size: авто авто;
  размер фона: авто авто;
}
  

CSS: Отсутствует фон в макете сетки

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

В чем проблема?

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

Следующий код создает базовый макет сетки.

У нас есть этот HTML:

  

  

    Столбец 1
  
  

    Колонка 2
  
  

    Колонка 3
  
  

И этот CSS:

 .container {
  цвет фона: #CFC;
} 
 .box {
  плыть налево;
  ширина: 32%;
  маржа слева: 2%;
  цвет фона: #FCC;
  высота: 400 пикселей;
}
.box: first-child {
  маржа слева: 0;
}  

На следующем изображении показан результат, который мы получаем с помощью этого кода:

Выглядит великолепно, у нас есть три столбца с промежутками между ними, но отсутствует фон! Он белый, но мы указали #CFC, зеленоватый цвет.Куда делся фон?

Почему это происходит?

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

Как решить проблему

Есть несколько способов исправить это. Самое простое решение - дать контейнеру свойство переполнения «скрыто» или «автоматически». Не нужно беспокоиться о переполнении, скрывающем контент, потому что мы не ограничили его высоту.

  .container {
  цвет фона: #CFC;
  переполнение: скрыто;
}  

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

Старое решение заключалось в создании элемента с clear: both и добавлении его в конец родительского содержимого

  

  

    Столбец 1
  
  

    Колонка 2
  
  

    Колонка 3
  
  
 
  

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

Если это решение нехорошее, то почему я о нем упоминаю? Потому что на этом основано лучшее решение проблемы. Решение полагается на псевдоэлемент :: after. Мы не могли использовать это в прошлом, потому что Internet Explorer не поддерживал это, но с тех пор прошло много времени, и сегодня он очень хорошо поддерживается браузерами.

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

  .container :: after {
  содержание: " ";
  дисплей: таблица;
  ясно: оба;
}  

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

В заключение

Лично я предпочитаю по возможности использовать решение для перелива.