пример
Укажите размер фонового изображения:
div
{
background: url(img_flwr.gif);
background-size: 80px 60px;
background-repeat: no-repeat;
}
Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
Свойство фон размера определяет размер фоновых изображений.
| Значение по умолчанию: | auto |
|---|---|
| Наследование: | no |
| Animatable: | yes. Read about animatable Try it |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object .style.backgroundSize="60px 120px" Try it |
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа следуют -webkit-, -moz- или -O- указать первую версию, которая работала с приставкой.
| Имущество | |||||
|---|---|---|---|---|---|
| background-size | 4.0 1,0 -webkit- | 9.0 | 4.0 3.6 -moz- | 4.1 3.0 -webkit- | 10.5 10,0 -о- |
CSS Синтаксис
background-size: auto|length|cover|contain|initial|inherit;Значения свойств
| Стоимость | Описание | Сыграй |
|---|---|---|
| auto | Значение по умолчанию. Фоновое изображение содержит его ширину и высоту | Сыграй " |
| length | Устанавливает ширину и высоту фонового изображения. Первое значение задает ширину, второе значение задает высоту. Если только одно значение, второе установлено значение "auto" | Сыграй " |
| percentage | Устанавливает ширину и высоту фонового рисунка в процентах от родительского элемента. Первое значение задает ширину, второе значение задает высоту. Если только одно значение, второе установлено значение "auto" | Сыграй " |
| cover | Масштаб фоновое изображение, чтобы быть настолько большим, насколько это возможно, так что фоновая область полностью покрыта фоновое изображение. Некоторые части фонового изображения не может быть в поле зрения в пределах фона области позиционирования | Сыграй " |
| contain | Масштабировать изображение самого большого размера таким образом, что обе его ширина и высота его может поместиться внутри области содержимого | Сыграй " |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный | Сыграй " |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о унаследовать |
Еще примеры
пример
Растянуть фоновое изображение, чтобы полностью покрыть область содержимого:
div
{
background: url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
}
Попробуй сам " пример
Растянуть фоновое изображение таким образом, чтобы ровно четыре копии помещаются по горизонтали:
div {
background: url(w3css.gif);
background-size: 25%;
} Попробуй сам " Похожие страницы
CSS3 учебник: CSS3 стола
HTML DOM ссылка: backgroundSize property