background-size | CSS | WebReference
Масштабирует фоновое изображение, согласно заданным размерам.
Краткая информация
| Значение по умолчанию | auto |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Да |
Синтаксис
background-size: <bg-size> [, <bg-size> ]*<bg-size> = [ <размер> | <проценты> | auto ]{1,2} | cover | contain
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- <размер>
- Задаёт размер в любых доступных для CSS единицах — пикселях (px), сантиметрах (cm), em и др.
- <проценты>
- Задаёт размер фоновой картинки в процентах от ширины или высоты элемента.
- auto
- Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
- cover
- Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
- contain
- Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Если установлено одно значение, оно устанавливает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задаёт ширину и высоту фоновой картинки.
Пример
Объектная модель
Объект.style.backgroundSize
Примечание
Safari до версии 4.1, Chrome до версии 3.0 и Android используют свойство -webkit-background-size.
Opera до версии 10.53 использует свойство -o-background-size.
Firefox до версии 4 использует свойство -moz-background-size.
Opera 9.5 некорректно устанавливает положение фиксированного фона.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 9 | 12 | 1 | 3 | 9 | 10.53 | 3 | 4.1 | 3.6 | 4 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 29.02.2020
Редакторы: Влад Мержевич
Свойство background-size | CSS справочник
CSS свойстваОпределение и применение
CSS свойство background-size определяет размер фонового изображения/-ий. Позиционирование фонового изображения внутри элемента определяется свойством background-origin.
Поддержка браузерами
CSS синтаксис:
background-size:"auto | length | cover | contain | initial | inherit";
JavaScript синтаксис:
object.style.backgroundSize = "150px 150px"
Значения свойства
| Значение | Описание |
|---|---|
| auto | Фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию. |
| length | Устанавливает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto. |
| % | Устанавливает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto. |
| cover | Масштабирует фоновое изображение под размеры элемента. Некоторые части фонового изображения могут быть скрыты из поля зрения. |
| contain | Масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Да.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Масштабирование фоновых изображений в CSS</title>
<style>
div {
width : 8em; /* устанавливаем ширину блока */
height : 8em; /* устанавливаем высоту блока */
border : 3px solid orange; /* устанавливаем сплошную границу размером 3px оранжевого цвета */
background : url(manul.jpg); /* указываем путь к файлу, который будет использоваться как фоновое изображение */
background-repeat : no-repeat; /* указываем, что фоновое изображение не будет повторяться */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right : 15px; /* устанавливаем величину отступа от правого края элемента */
margin-bottom : 15px; /* устанавливаем величину отступа от нижнего края элемента */
color : yellow; /* устанавливаем цвет шрифта желтый */
}
.test {background-size : auto;} /* фоновое изображение содержит свою ширину и высоту (значение по умолчанию) */
.test2 {background-size : 100px 100px;} /* задаем ширину и высоту фонового изображения */
.test3 {background-size : 70% 70%;} /* задаем ширину и высоту фонового изображения в процентах от родительского элемента */
.test4 {background-size : cover;} /* масштабируем фоновое изображение под размеры элемента (часть изображения скрывается) */
.test5 {background-size : contain;} /* масштабируем фоновое изображение, чтобы оно целиком поместилось внутри элемента */
</style>
</head>
<body>
<div class = "test">auto</div>
<div class = "test2">100px 100px</div>
<div class = "test3">70% 70%</div><br>
<div class = "test4">cover</div>
<div class = "test5">contain</div>
</body>
</html>
CSS background-size | TuHub
Общие сведения
Фоновое изображение может быть настроено таким образом чтобы полностью покрывать всю область элемента или иметь заданные автором размеры.
У некоторых изображений (<image>), таких как, например, JPEG, есть встроенные размеры и пропорции, а у других изображений, таких как градиенты (<gradient>) нет встроенных размеров и пропорций и они занимают всю фоновую область, если не указано иное. Окончательный размер фонового изображения формируется на основе того есть ли у фонового изображения внутренние размеры и пропорции.
Свойство background-size принимает либо ключевое слово (cover или contain), либо пару не ключевых слов (<length> | <percentage>), либо не ключевое слово и значение auto. Например:
background-size: cover; /* ключевое слово */
background-size: contain; /* ключевое слово */
background-size: 100% 50%; /* пара значений из не ключевых слов */
background-size: 300px 200px; /* пара значений из не ключевых слов */
background-size: 50% auto; /* не ключевое слово + плюс значение 'auto' */Для пары значений первое значение задаёт ширину изображения, а второе значение задаёт высоту изображения.
Если указано только одно не ключевое значение, то второе считается как auto.
Свойство background-size может принимать несколько значений разделённых запятыми, поэтому когда у элемента указано несколько изображений в свойстве background-image, каждое значение будет применяться к соответствующему фоновому изображению (первое значение для первого фонового изображения, второе значение для второго и т.д.).
Синтаксис свойства
- Синтакис:
background-size: <bg-size> [ , <bg-size> ]* /* где */ <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain - Значение по умолчанию:
auto - Применяется: ко всем элементам
- Наследуется: да
- Анимируется: да, за исключением ключевых слов
Значения свойства
<length>— значение <length> масштабирует фоновое изображения до указанного значения в соответствующем направлении. Нельзя указывать отрицательную длину.<percentage>— значение указанное в процентах масштабирует фоновое изображения до указанных процентов относительно области позиционирования фона, который определяется свойством background-origin. Если значение свойстваbackground-originне указано автором, будет использовано значениеpadding-box, то есть фоновое изображение позиционируется относительно системы координат фона, центр которой находится в верхнем левом углу.contain— масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наибольшего, чтобы его ширина и высота вписывались в область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно растягивается на всю область позиционирования.cover— масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наименьшего размера, чтобы его ширина и высота могли полностью покрывать область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно отображается в размере области позиционирования.auto— ключевое слово, которое масштабирует фоновое изображение в соответствующем направлении, сохраняя его встроенные пропорции.- Если у изображения есть встроенные размере (высота и ширина), то оно будет отображаться со своими размерами.
- Если у изображения нет встроенных пропорций и размеров, то оно будет отображаться с размерами области позиционирования.
- Если у него нет размеров, но есть пропорции, то оно отобразиться так как-будто было установлено ключевое слово
contain. - Если у изображения есть один из встроенных размеров и пропорция, то оно отобразиться с размерами определёнными этим одним размером и пропорцией.
- Если у изображения есть один из встроенных размеров, но нет пропорции, оно отобразиться с использованием этого одно встроенного размера и соответствуюещего размера области позиционирования.
Поддержка браузерами
CSS3 Background-image options
Пример
Ниже вы увидите пример использования свойства background-size:
webkit-background-size — свойство css :: руководство cssdot.ru
Свойство -webkit-background-size позволяет указывать размеры фонового изображения, которые могут быть заданы в абсолютных величинах (cm, mm, in и т.д.), относительных (px, em и т.д.), или в процентах, по отношению к ширине и высоте элемента контейнера. Масштабировать фоновое изображение возможно как с сохранением исходных пропорций, так и без них.
Допустимые значения
length{1,2} — задает размер фонового изображения в абсолютных величинах (cm, mm, in и т.д.) или относительных (px, em и т.д.). Если задано только одно значение, то второе вычисляется автоматически исходя из пропорций картинки.percentage{1,2} — задает размер фонового изображения в процентах от ширины и/или высоты элемента контейнера. Если задано только одно значение, то второе вычисляется автоматически исходя из пропорций картинки.- auto{1,2} — задает размер фонового изображения равным исходному, в случае, если указаны обе величины auto, или просто auto; а если указан только для одной стороны картинки (25% auto), то размер вычисляется исходя из пропорций картинки.
- cover — масштабирует картинку с сохранением пропорций по меньшей стороне, то есть так, чтобы фон с избытком покрывал блок-контейнер.
- contain — масштабирует картинку с сохранением пропорций по большей стороне, то есть так, чтобы блок-контейнер с избытком покрывал фон.
Примечания
Chrome 1-3, Safari 3-4
Свойство -webkit-background-size в движке WebKit изначально было реализовано в рамках черновика спецификации CSS3, в котором отсутствовали ключевые слова contain и cover, а так же предполагалось, что если задан размер фоновой картинки с использованием только одного параметра, то второй параметр считается, не пропорционально размерам картинки, а равен первому.
Свойство -webkit-background-size относится к спецификации CSS, применяется к всем элементам, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, Является расширением движка WebKit (браузеры Chrome и Safari), и не совместимо с другими браузерами.
Смотри также:
- background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.
- -o-background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.
- -moz-background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.
Краткое описание
Размер фонового изображения, или его масштаб относительно элемента-контейнера.
Синтаксис:
[ <length> | <percentage> | auto ]{1,2} | cover | contain [, [ <length> | <percentage> | auto ]{1,2} | cover | contain]*
Применяется к:
всем элементам
Наследование:
не наследуетсяТип носителя:
визуальные
Объектная модель документа (DOM):
[элемент].style[‘-webkit-background-size’]
Кроссбраузерная совместимость
Internet Explorer
не поддерживаетсяFirefox
не поддерживаетсяChrome
| 1.0 | 2.0 | 3.0 | 4.1 | 5.0 | 6.0 | 7.0 | 8.0 | 9.0 | 10.0 | 11.0 | 12.0 | 13.0 | 14.0 | 15.0 | 16.0 | 17.0 | 18.0 | 19.0 | 20.0 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| +/- | +/- | +/- | + | + | + | + | + | + | + | + | + | + | + | + | + | + | + | + | + |
Safari
| 1.0 | 1.1 | 1.2 | 1.3 | 2.0 | 3.0 | 3.2 | 4.0 | 5.0 |
|---|---|---|---|---|---|---|---|---|
| — | — | — | — | — | — | +/- | +/- | + |
Opera
не поддерживаетсяHTML Стиль DOM Style backgroundSize Свойство
❮ Объект стиля
Пример
Укажите размер фонового изображения:
document.getElementById («myDIV»). style.backgroundSize = «60px 120px»;
Попробуйте сами »Определение и использование
Свойство backgroundSize устанавливает или возвращает размер фоновых изображений.
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Числа, за которыми следуют Webkit, Moz или O, указывают первую версию, которая работала с префиксом.
| Объект | |||||
|---|---|---|---|---|---|
| фон Размер | 4,0 1,0 Webkit | 9,0 | 4,0 3,6 млн унций | 4,1 3,0 Webkit | 10,5 10,0 О |
Синтаксис
Вернуть свойство backgroundSize:
объект .style.backgroundSize
Установите свойство backgroundSize:
объект .style.backgroundSize = «auto | length | cover | contain | intial | inherit»
Значения собственности
| Значение | Описание |
|---|---|
| авто | Значение по умолчанию. Фоновое изображение содержит его ширину и высоту |
| длина | Устанавливает ширину и высоту фонового изображения.Первое значение устанавливает ширину, второе значение устанавливает высоту. Если указано только одно значение, для второго устанавливается значение «авто» |
| в процентах | Устанавливает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение устанавливает ширину, второе значение устанавливает высоту. Если указано только одно значение, для второго устанавливается значение «авто» |
| крышка | Масштабируйте фоновое изображение до максимального размера, чтобы фоновая область полностью покрывалась фоновым изображением.Некоторые части фонового изображения могут быть не видны в области позиционирования фона |
| содержат | Масштабировать изображение до максимального размера, чтобы его ширина и высота могли уместиться внутри области содержимого. |
| начальный | Устанавливает для этого свойства значение по умолчанию. Читать про начальные |
| унаследовать | Наследует это свойство от своего родительского элемента. Читать про наследство |
Технические характеристики
| Значение по умолчанию: | авто |
|---|---|
| Возвращаемое значение: | Строка, представляющая свойство размера фона элемента |
| Версия CSS | CSS3 |
Связанные страницы
Ссылка CSS: свойство background-size
❮ Объект стиля
css — Есть ли способ установить размер фона как для содержания, так и для покрытия?
Устанавливая размер фона на , обложка , вы даете браузеру право настраивать изображение до тех пор, пока оно полностью не покроет область; он проигнорирует присвоенные вами значения ширины и высоты.
С содержит , вы позволяете браузеру решать, как настроить изображение так, чтобы все изображение поместилось в пределах области, которая может быть основана на высоте или ширине для достижения этой цели (в зависимости от ориентации изображения по ширине или по высоте).
background-size: 100% 100% — это, вероятно, то, что вы ищете, но это непропорционально отрегулирует изображение (например, растянет или сжимает в зависимости от ориентации). Тем не менее, звучит так, как будто это именно то, что вы хотите, когда говорите «и закрывать, и содержать».
Существует множество способов размещения и масштабирования изображений, используемых в качестве фона (где фон не обязательно означает свойство фона CSS)
Ниже приведен упрощенный пример того, как я это сделал (при условии, что изображения имеют размер примерно 700×300 пикселей)
.container-wrap {
ширина: 100%;
}
.container {
положение: относительное;
заполнение: 42.86% 0 0 0;
/ * где padding = пропорция ширины и высоты изображения
которое можно получить делением: высота / ширина = 0.42857 * /
}
.container img {
позиция: абсолютная;
верх: 0px;
вправо: 0 пикселей;
внизу: 0px;
слева: 0px;
}
важно, чтобы ваши изображения сохраняли близкую пропорцию друг к другу — если они немного не совпадают, небольшое искажение не должно быть видно большинству людей для большинства изображений.
Опять же, есть другие методы для достижения этой цели. Веб-сайт, на который вы ссылаетесь, применяет аналогичную концепцию. Концепция та же, метод немного отличается (например, они используют ширину: 100% на изображениях вместо их абсолютного позиционирования), где концепция = «использует какой-то метод для пропорционального распределения изображений в контейнере, чтобы он волшебная шкала »
Обратите внимание, что тот же метод можно применить к контейнерам видео (например, с YouTube).
СвойствоCSS3 background-size — Tutorial Republic
Тема: Справочник по свойствам CSS3 Пред. | След.
Описание
Свойство CSS background-size определяет размер фоновых изображений.
В следующей таблице приведены контекст использования и история версий этого свойства.
| Значение по умолчанию: | авто авто |
|---|---|
| Применимо к: | Все элементы |
| Унаследовано: | Нет |
| Анимируемое: | Да. См. анимируемые свойства . |
| Версия: | Новое в CSS3 |
Синтаксис
Синтаксис свойства задается следующим образом:
размер фона: | длина | процентов | авто | крышка | содержать | начальная | унаследовать |
В приведенном ниже примере показано свойство background-size в действии.
.box {
ширина: 250 пикселей;
высота: 150 пикселей;
отступ: 10 пикселей;
граница: 6px пунктирная # 333;
фон: url ("images / sky.jpg") без повтора;
размер фона: содержать;
} Совет: Свойство background-size обычно используется для создания полноразмерных фоновых изображений, масштабируемых в соответствии с размером области просмотра или окнами браузера.
Значения свойств
В следующей таблице описаны значения этого свойства.
| Значение | Описание |
|---|---|
| длина | Устанавливает ширину и высоту фонового изображения на указанную длину. Первое значение устанавливает ширину, а второе значение устанавливает высоту. Если указано только одно значение, предполагается, что вторым будет auto .Отрицательные значения длины не допускаются. |
| процент | Устанавливает ширину и высоту фонового изображения в процентах от области позиционирования фона. Первое значение устанавливает ширину, а второе значение устанавливает высоту. Если указано только одно значение, предполагается, что вторым будет auto . Отрицательные значения в процентах не допускаются. |
авто | Значение auto для одного измерения масштабирует фоновое изображение в соответствующем направлении, чтобы сохранить его внутреннюю пропорцию.Если для обоих размеров указано значение auto , тогда фоновое изображение будет содержать собственную ширину и высоту, что является поведением по умолчанию. |
крышка | Масштабируйте изображение, сохраняя его внутреннее соотношение сторон (если оно есть), до наименьшего размера, чтобы и его ширина, и его высота могли полностью покрывать область позиционирования фона. |
содержат | Масштабируйте изображение, сохраняя его внутреннее соотношение сторон (если оно есть), до максимального размера, чтобы и его ширина, и его высота могли уместиться в области позиционирования фона. |
начальный | Устанавливает для этого свойства значение по умолчанию. |
наследовать | Если указано, связанный элемент принимает вычисленное значение свойства своего родительского элемента background-size . |
Совместимость с браузером
Свойство background-size поддерживается во всех основных современных браузерах.
Базовая поддержка —
|
Дополнительная литература
См. Учебник по: Фон CSS, Фон CSS3.
Связанные свойства: background , background-attachment , background-color , background-image , background-clip , background-position , background-repeat , background-origin .
CSS | Свойство background-size — GeeksforGeeks
Свойство background-size в CSS используется для установки размера фонового изображения.
Синтаксис:
размер фона: авто | длина | обложка | содержать | начальный | наследование;
Значения свойств:
auto: Используется для установки для свойства background-size значения по умолчанию. Он используется для отображения исходного размера фонового изображения.
- Синтаксис:
размер фона: авто;
- Пример:
<html>9901 901заголовок>размер фона Свойствозаголовок>1 901 901 901 901 901 901 901 901 901 901 901 901body {background-image: url (background-size: auto;background-repeat: no-repeat;}
90 002}стиль>головка>9h3> размер фона: авто;h3>тело>html> - Вывод:
длина: Используется для установки ширины и высоты фонового изображения.Первое значение указывает ширину, а второе значение указывает высоту фонового изображения в пикселях, pt, em и т. Д. Если какое-либо значение не указано, то оно устанавливается на авто.
- Синтаксис:
размер фона: длина;
- Пример:
<html>190169заголовок>размер фона Свойствозаголовок>1901 901 901 901 901 901 901 901 901 901 901 901body {background-image: url (background-size: 400px 450px;background-repeat: no-repeat;03
901 901
03
901 90 003
стиль>головка>9
<h3> размер фона: длина;h3>тело> - Вывод:
процент: Он используется для установки ширины и высоты в процентах относительно родительского элемента.Первое значение указывает ширину, а второе значение указывает высоту фонового изображения. Если какое-либо значение не задано, оно устанавливается на авто.
cover: Используется для изменения размера фонового изображения для покрытия всего элемента контейнера.
- Синтаксис:
размер фона: обложка;
- Пример:
<html>9901 901заголовок>размер фона Свойствозаголовок>1 901 901 901 901 901 901 901 901 901 901 901 901body {background-image: url (background-size: cover;background-repeat: no-repeat;}
9 0002}стиль>головка>9h3> размер фона: крышка;h3>корпус>html> - Вывод:
Поддерживаемые браузеры: Браузеры, поддерживаемые свойством background-size , перечислены ниже:
- Google Chrome 4.0, 1.0 -webkit-
- Internet Explorer 9.0
- Firefox 4.0, 3.6-moz-
- Opera 4.1, 3.0 -webkit-
- Safari 10.5, 10-o-
Как изменить размер фоновых изображений с помощью CSS3
В CSS2.1 фоновые изображения, примененные к контейнеру, сохранили свои фиксированные размеры. К счастью, CSS3 представляет свойство background-size , которое позволяет растягивать или сжимать фон. Он идеально подходит, если вы создаете шаблон с помощью методов адаптивного веб-дизайна.
Есть несколько способов определить размеры размеров - просмотреть демонстрационную страницу CSS3 background-size .
Абсолютное изменение размера
Для измерения длины можно использовать:
размер фона: ширина высота; По умолчанию ширина и высота установлены на auto , что сохраняет исходные размеры изображения.
Мы можем изменить размер изображения до нового размера, используя абсолютные измерения, такие как px, em, cm и т. Д.При необходимости соотношение сторон будет изменено, поэтому, если размер нашего фонового изображения составляет 200 × 200 пикселей, следующий код сохраняет эту высоту, но уменьшает ширину вдвое:
размер фона: 100 пикселей 200 пикселей; Если определена только одна длина, предполагается, что это ширина. Для высоты установлено значение , авто , и изображение сохранит свое соотношение сторон, то есть
размер фона: 100 пикселей;
размер фона: 100 пикселей автоматически; Этот код масштабирует наше изображение с 200 × 200 до 100 × 100 пикселей.
Относительное изменение размера с использованием процентов
Если используется процент, размер основан на содержащем элементе - НЕ размер изображения, например
размер фона: 50% авто; Таким образом, ширина фонового изображения зависит от размера его контейнера. Если ширина нашего контейнера составляет 500 пикселей, размер нашего изображения изменяется до 250 × 250.
Использование процента может быть полезно для адаптивного дизайна. Измените размер демонстрационной страницы , чтобы узнать, как меняются размеры.
Масштабирование до максимального размера
Свойство background-size также принимает ключевое слово contain . Это масштабирует изображение по размеру контейнера. Другими словами, изображение будет пропорционально увеличиваться или уменьшаться, но ширина и высота не будут превышать размеры контейнера:
размер фона: содержать; Заполнение фона
background-size также принимает ключевое слово cover .Изображение масштабируется по размеру всего контейнера, но, если у него другое соотношение сторон, изображение будет обрезано:
размер фона: обложка; Размер нескольких фонов
Можно изменить размер нескольких фонов с помощью списка значений, разделенных запятыми, которые применяются в том же порядке, например
фон:
url ("Sheep.png") 60% 90% без повтора,
url ("Sheep.png") 40% 50% без повтора,
url ("Sheep.png") 10% 20% no-repeat # 393;
размер фона: 240 пикселей 210 пикселей, авто, 150 пикселей; Совместимость с браузером
Последние версии всех браузеров поддерживают background-size без префикса.
IE8 и ниже не поддерживают свойство. Вы можете использовать фильтр IE для имитации содержания и покрытия, но невозможно изменить размер фоновых изображений, не прибегая к уловкам, таким как использование реальных img за другими элементами. Это грязно; Я рекомендую изящную деградацию.
Сокращенное обозначение
В спецификации W3C CSS Backgrounds and Borders Module Level 3 указано, что background-size может быть определен после background-position в сокращенной нотации background .Ни один из браузеров не поддерживает эту опцию, поэтому на данный момент background-size должен быть определен как отдельное свойство.
Просмотр демонстрационной страницы размера фона CSS3…
Поднимите свои навыки CSS на новый уровень с помощью нашей книги «Мастер CSS, 2-е издание» Тиффани Б. Браун, в которой рассматриваются CSS-анимации, переходы, преобразования и многое другое.
Расположение и размер фонового изображения
Когда вы настраиваете свой сайт и хотите разместить изображение позади некоторого контента или покрыть всю область, важно понять несколько ключевых параметров с точки зрения размера фона.Вот краткое руководство, в котором описаны важные вещи, которые нужно учесть при настройке фона.
Теперь фоновое изображение - это просто фон, поэтому вы не можете установить размер области, добавив фоновое изображение определенного размера. Размер всего, к чему вы добавляете это фоновое изображение, будет определяться содержимым, находящимся в контейнере. Что вы можете определить с помощью фона, так это то, как это изображение заполняет пространство контейнера.
Начнем с примера с изображением с соотношением сторон 2 × 1.Это означает, что каждые 2 пикселя в ширину, это 1 пиксель в высоту. На изображениях ниже мы выделили два размера экрана: настольный и мобильный, чтобы показать, как работает каждый параметр размера.
Размер фона: крышкаЭта опция гарантирует, что в контейнере нет пустых мест, не заполненных фоновым изображением. При этом соблюдается соотношение сторон изображения, поэтому изображение всегда растягивается до заполнения, но не искажается за пределы соотношения сторон изображения.Это означает, что у вас будут части изображения, которые находятся за пределами экрана и не видны.
Размер фона: содержитЭта опция включения будет учитывать соотношение сторон вашего изображения и следить за тем, чтобы ни одно изображение не было за пределами экрана, поэтому вы всегда будете видеть полное изображение в правильном соотношении.
Размер фона: 100% 100%Эта опция 100% 100% не защитит пропорции вашего изображения.Таким образом, изображение будет растягиваться или искажаться, чтобы заполнить пространство при отображении всего изображения.
Надеюсь, это поможет объяснить параметры изменения размера фона.
Фоны с параллаксом
Одна из забавных функций наших премиальных тем - возможность добавлять фоны с параллаксом. Ознакомьтесь с разделом «хочу увидеть больше» этой демонстрации.
Параметры фона для этого можно найти в стилях строк вашего конструктора страниц. Я хочу вкратце объяснить, чем параллакс отличается от «background-size: cover».
Фоновая крышка должна заполнять только пространство контейнера. Итак, если ваш контейнер имеет высоту 400 пикселей, то это ровно столько, сколько должно быть изображения. Но параллакс должен занимать всю высоту экрана, потому что он настроен на фиксацию позади вашего контента. Таким образом, не имеет значения, какой высоты ваш контейнер, с которым вы хотите иметь фон с параллаксом.
Вот пример, который, надеюсь, прояснит. Допустим, я использовал это изображение:
Ниже приведены два примера: один с заданным фоном для покрытия, а другой с заданным параллаксом фона.
Обратите внимание на то, как вы видите все изображение, потому что соотношение соответствует пропорции контейнера.
Обратите внимание, насколько масштабным должно быть изображение. Это потому, что изображение должно быть растянуто, чтобы заполнить высоту экрана, а не контейнер для области параллакса. Это позволяет фону прокручиваться за изображением при прокрутке страницы.
Для параллаксного фона я рекомендую использовать изображения около 2000 пикселей в ширину и 1200 пикселей в высоту.
содержат, но в GLSL · GitHub
Как CSS background-size: содержат, но в GLSL · GitHubМгновенно делитесь кодом, заметками и фрагментами.
Как CSS background-size: содержать, но в GLSL
| vec2 backgroundUV (vec2 uv, vec2 разрешение, vec2 texResolution) { | |
| float tAspect = texResolution.x / texResolution.y; | |
| float pAspect = разрешение.x / разрешение.y; | |
| float pwidth = resolution.x; | |
| float pheight = resolution.y; | |
| ширина поплавка = 0,0; | |
| высота поплавка = 0,0; | |
| if (tAspect> pAspect) { | |
| height = pheight; | |
| ширина = высота * tAspect; | |
| } else { | |
| width = pwidth; | |
| высота = ширина / вид; | |
| } | |
| float x = (pwidth - ширина) / 2.0; | |
| float y = (pheight - высота) / 2.0; | |
| vec2 nUv = uv; | |
| nUv - = vec2 (x, y) / разрешение; | |
| nUv / = vec2 (ширина, высота) / разрешение; | |
| return nUv; | |
| } | |
| #pragma glslify: экспорт (backgroundUV) |