Background cover css: background-size — CSS: Cascading Style Sheets

23.05.2023 Facebook Twitter LinkedIn Google+ Разное

background-size » Самоучитель CSS

21-03-2016, 12:52

background-size
Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.5+ 3.0+ 3.6+ 2.1+ 1.0+

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

Значение по умолчанию auto
Наследуется Нет
Применяется Ко всем элементам
Ссылка на спецификацию http://www.w3.org/TR/css3-background/#the-background-size

Версии CSS

CSS 1 CSS 2 CSS 2. 1
CSS 3

Описание

Масштабирует фоновое изображение согласно заданным размерам.

Синтаксис

background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain

Значения

<значение>
Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.
<проценты>
Задает размер фоновой картинки в процентах от ширины или высоты элемента.
auto
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-size</title>
  <style>
   div {
    height: 200px; /* Высота блока */
    border: 2px solid #000; /* Параметры рамки */
    background: url(images/mybg.png) 100% 100% no-repeat; /* Добавляем фон */
    background-size: cover; /* Масштабируем фон */
   }
  </style>
 </head>
 <body>
  <div>...</div>
 </body>
</html>

Браузеры

Safari до версии 4.1 и Chrome до версии 3.0 используют нестандартное свойство -webkit-background-size.

Opera до версии 10.53 использует нестандартное свойство -o-background-size.

Firefox до версии 4.0 использует нестандартное свойство -moz-background-size.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

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

 

Еще новости по теме:


Другие новости по теме:

Комментарии для сайта Cackle

reactjs — исправлен фон CSS + обложка растягивает изображение (не покрывает должным образом)

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

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

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

У нас возникают проблемы с вложением, когда мы пытаемся объединить его с background-size: cover (или содержат ). Поскольку background-attachment уже отправил фоновое изображение в область просмотра, любые изменения положения фона, сделанные через CSS, становятся относительно области просмотра .

Обычно это нормально, но это означает, что когда вы пытаетесь использовать либо процентное значение, либо предопределенный оператор размера, такой как

cover , размер фона также будет соответствовать размеру области просмотра .

При написании этой сводки я обнаружил, что это поведение — это , упомянутое в документации MDN. Единственная проблема заключается в том, что это всего два предложения, застрявшие в середине абзаца процентов в разделе «Значения» на странице размера фона. Угу.

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

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

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

Заключение

В одном из ваших комментариев ниже вы сказали (выделение мое):

Виновником был

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

CSS часто обманывает ожидания, и это не исключение. Для приведенных ниже случаев предположим, что мы используем background-repeat: no-repeat .

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

Но когда вы используете background-attachment: fixed …

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

Если вы хотите изменить размер изображения с помощью относительного элемента обложки или , содержащей , ваши два варианта, по сути, состоят в том, чтобы удалить background-attachment: fixed или изменить размер исходного изображения так, чтобы ваш Объявление 0003 background-size не требуется. К сожалению, в настоящее время не существует решения CSS, позволяющего одновременно изменять размеры вложений и ключевых слов.

cover — класс CSS Tailwind

← Список классов CSS Tailwind

Preview

Check

.bg-cover в реальном проекте

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

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Открыть в визуальном редакторе →

Источник CSS 

 . bg-cover {
  размер фона: обложка;
}

Дополнительные сведения в фоновом режиме CSS Tailwind

  • .bg-auto
  • .bg-содержать
  • .bg-нижняя часть
  • .bg-top
  • .bg-центр
  • .bg-левый
  • .bg-левый-нижний
  • .bg-левый-верхний
  • .bg-право
  • . bg-справа-снизу
  • .bg-справа-вверху
  • .bg-фиксированный
  • .bg-местный
  • .bg-прокрутка
  • .bg-без повтора
  • .bg-повторить
  • .bg-repeat-x
  • .bg-repeat-y
  • .bg-повторить раунд
  • .
Comments
Leave Comment