пример
Установите различные свойства фона в одном объявлении:
body
{
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
Попробуй сам " Определение и использование
Фон сокращённое свойство устанавливает все свойства фона в одном объявлении.
Свойства, которые могут быть установлены, являются: цвет фона, фоновое изображение, фон положение, фон-размер, фон-повторить, фон-происхождения, фон-клип, и фон-вложение.
Это не имеет значения , если одно из указанных выше значений отсутствуют, например , фон: # FF0000 url(smiley.gif) ; позволено.
| Значение по умолчанию: | see individual properties |
|---|---|
| Наследование: | no |
| Animatable: | yes, see individual properties . Read about animatable Try it |
| Версия: | CSS1 + new properties in CSS3 |
| Синтаксис JavaScript: | object .style.background="red url(smiley.gif) top left no-repeat" Try it |
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
| Имущество | |||||
|---|---|---|---|---|---|
| background | 1,0 | 4.0 | 1,0 | 1,0 | 3.5 |
Note: Internet Explorer 8 и более ранние версии не поддерживают несколько фоновых изображений на одном элементе.
Примечание: См индивидуальную поддержку браузера для каждого значения ниже.
CSS Синтаксис
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;Примечание: Если одно из свойств в сокращённом декларации является собственностью BG-размер, вы должны использовать / (slash) , чтобы отделить его от объекта BG-положение, например , background:url(smiley.gif) 10px 20px / 50px 50px ; приведет фоновое изображение, расположенный на 10 пикселей с левой стороны, 20 пикселей сверху, и размер изображения будет составлять 50 пикселей в ширину и 50 пикселей в высоту.
Примечание: При использовании нескольких источников фонового изображения , но и хотите цвет фона, параметр цвет фона должен быть последним в списке.
Значения свойств
| Стоимость | Описание | CSS |
|---|---|---|
| background-color | Задает цвет фона для использования | 1 |
| background-image | Задает один или несколько фоновых изображений, которые будут использоваться | 1 |
| background-position | Указывает положение фоновых изображений | 1 |
| background-size | Указывает размер фоновых изображений | 3 |
| background-repeat | Определяет, как повторять фоновые изображения | 1 |
| background-origin | Определяет область позиционирования фоновых изображений | 3 |
| background-clip | Определяет область рисования фоновых изображений | 3 |
| background-attachment | Указывает, должны ли фиксированные или прокручивается фоновые изображения с остальной частью страницы | 1 |
| начальная | Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный | 3 |
| унаследовать | Наследует это свойство от своего родительского элемента. Читайте о унаследовать | 2 |
Похожие страницы
Учебник CSS: CSS фона
CSS3 учебник: CSS3 стола
HTML DOM ссылка: background property