English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Размер фона,指定的 CSS3 свойством background-size.
В таблице ниже приведен обзор контекста использования и истории версий этого свойства.
| Значение по умолчанию: | auto auto |
|---|---|
| Применяется к: | Все элементы |
| Наследование: | Нет |
| Анимация возможна: | Да.См. также Атрибут анимации. |
| Версия: | Новая функция CSS3 |
| JavaScript грамматика: | object object.style.backgroundSize="60px 80px" |
Грамматика этого свойства такая:
background-size: length | percentage | auto | cover | contain | initial | inherit
Ниже приведен пример того, как использовать атрибут background-size.
.box {
width: 250px;
height: 150px;
padding: 10px;
border: 6px dashed #333;
background: url("images/sky.jpg") no-repeat;
background-size: contain;
}Проверьте, как это выглядит‹/›Совет:Свойство background-size обычно используется для создания фоновых изображений полного размера, которые масштабируются в зависимости от размера видимой области браузера или ширины.
В таблице ниже описаны значения этого свойства.
| Значение | Описание |
|---|---|
| length | Установите ширину и высоту фонового изображения в заданных единицах измерения. Первый параметр устанавливает ширину, а второй - высоту. Если указан только один параметр, второй параметр по умолчанию устанавливается в auto. Запрещены отрицательные значения единиц измерения. |
| percentage | Установите ширину и высоту фонового изображения в процентах от области фонового расположения. Первый параметр устанавливает ширину, а второй - высоту. Если указан только один параметр, второй параметр по умолчанию устанавливается в auto. Запрещены отрицательные значения процентов. |
| auto | Используйте auto для значения одной из сторон фонового изображения, чтобы поддерживать его固有ное соотношение сторон. Если auto указан для обоих размеров, фоновое изображение будет содержать свои собственные ширину и высоту, что является поведением по умолчанию. |
| cover | Уменьшите размер изображения до минимального, сохраняя его исходные пропорции (если они есть), чтобы ширина и высота могли полностью охватывать область фонового расположения. |
| contain | Измените размер изображения, сохраняя его исходные пропорции (если они есть), увеличивая до максимального размера, чтобы ширина и высота могли соответствовать области фонового расположения. |
| initial | Установите это свойство в его значение по умолчанию. |
| inherit | Если указано, то связанные элементы используют значение свойств background-size родительского элемента. |
Совместимость браузеров для свойства background-size, все основные браузеры поддерживают это свойство.
|
Пожалуйста, обратитесь к следующим руководствам:CSS фоновое изображение,CSS3 фоновое изображение.
Связанные свойства:background,background-attachment,background-color,background-image,background-clip,background-position,background-repeat,background-origin.