background | htmlbook.ru
| CSS | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 2.1 | 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 2.1+ | 1.0+ |
| 3 | 9.0+ | 1.0+ | 10.5+ | 1.3+ | 3.6+ | 2.1+ | 1.0+ | |
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.
Синтаксис
Здесь:
<фон> = [background-attachment || background-image || background-position || background-repeat] | inherit
<последний_фон> = [background-attachment || background-color || background-image || background-position || background-repeat] | inherit
Если наряду с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления.
Значения
Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить. inherit наследует значение у родительского элемента.
Пример 1
XHTML 1.0CSS2.1IECrOpSaFx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>background</title> <style type="text/css"> div { height: 200px; /* Высота блока */ width: 200px; /* Ширина блока */ overflow: auto; /* Добавляем полосы прокрутки */ padding-left: 15px; /* Отступ от текста слева */ background: url(images/hand.png) repeat-y #fc0; /* Цвет фона, путь к фоновому изображению и повторение фона по вертикали */ } </style> </head> <body> <div> Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat. </div> </body> </html>
Результат данного примера показан ниже (рис. 1).
Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера
Пример 2
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background</title>
<style>
body {
background: url(images/hand.png) repeat-y,
#fc0 url(images/bg-right.png) repeat-y 100% 0;
}
</style>
</head>
<body>
</body>
</html> Объектная модель
[window.]document.getElementById(«elementID»).style.background
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Свойство background | CSS справочник
CSS свойстваОпределение и применение
CSS свойство background позволяет установить необходимые свойства фона в одном объявлении (универсальное свойство). Значения могут быть указаны в любом порядке (и в любом необходимом количестве), браузер автоматически определит, какое из них соответствует необходимому свойству.
Значения следующих свойств могут быть установлены:
Обращаю Ваше внимание на то, что если Вы используете для фона элемента значения position и size вместе, то вы должны при этом разделять их слэшем «/» (position/size).
Подробную информацию о работе с задним фоном элементов Вы можете найти в следующей статье учебника:
Поддержка браузерами
CSS синтаксис:
background:"color image position/size repeat origin clip attachment initial | inherit";
JavaScript синтаксис:
object.style.background="blue no-repeat"
Значения свойства
| Значение | Описание |
|---|---|
| background-color | Определяет цвет фона (HEX, RGB, RGBA, HSL, HSLA, «Предопределённые цвета»). |
| background-image | Задает одно или несколько фоновых изображений для элемента. |
| background-position | Задает положение (позицию) фонового изображения. |
| background-size | Определяет размер фонового изображения/-ий. |
| background-repeat | Устанавливает, как фоновое изображение будет повторяться. |
| background-origin | Определяет область позиционирования фонового изображения/-ий. |
| background-clip | Определяет область рисования фона. |
| background-attachment | Устанавливает, поведение фонового изображения во время прокрутки (фиксированное или прокручивается с остальной частью страницы). |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS1 (в CSS3 добавлены свойства background-size, background-origin и background-clip).Наследуется
Нет.Анимируемое
Да.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Пример использования универсального свойства background</title>
<style>
.primer {
background:#00FF00 url('/images/smile.png') repeat-x center; /* свойства фона для элемента */
height:150px; /* высота элемента */
}
</style>
</head>
<body>
<div class = "primer"></div>
</body>
</html>
В этом примере с использованиме CSS свойства height мы задали для блочного элемента <div> высоту 150 пикселей и с использованием универсального CSS свойства background указали следующие значения для его фона:
- зеленый цвет заднего фона в шестнадцатерично системе указания цвета — #00FF00 (background-color).
- путь к изображению, которое используется в качестве заднего фона (smile.png) (background-image).
- указали, что наше изображение повторяется только по оси X (
background | CSS | WebReference
Универсальное свойство background позволяет установить одновременно несколько характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. Допустимо, также, указывать параметры сразу нескольких фонов, перечисляя их через запятую.
Краткая информация
| Значение по умолчанию | transparent || none || repeat || scroll || 0% 0% |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Да |
Синтаксис
background: [<фон>, ]* <последний_фон>Здесь:
<фон> = background-image || background-position [ / background-size ]? || background-repeat || background-attachment || background-origin || background-clip
<последний_фон> = background-image || background-position [ / background-size ]? || background-repeat || background-attachment || background-origin || background-clip || background-color
Если наряду с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления.
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
Любые комбинации значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить.
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>background</title> <style> div { height: 200px; /* Высота блока */ width: 200px; /* Ширина блока */ overflow: auto; /* Добавляем полосы прокрутки */ padding-left: 15px; /* Отступ от текста слева */ background: url(/example/image/hand.png) repeat-y #fc0; /* Цвет фона, путь к фоновому изображению и повторение фона по вертикали */ } </style> </head> <body> <div>Великобритания, куда входят Пик-Дистрикт, Сноудония и другие многочисленные национальные резерваты природы и парки, неумеренно применяет культурный рельеф. Суша морей начинает туристический подземный сток. Дождливая погода дегустирует кандым. Винный фестиваль проходит в приусадебном музее Георгикон, там же беспошлинный ввоз вещей и предметов в пределах личной потребности связывает белый саксаул. Санитарный и ветеринарный контроль оформляет городской Гвианский щит.</div> </body> </html> Результат данного примера показан ниже (рис. 1).
Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>background</title> <style> body { background: url(/example/image/hand.png) repeat-y, url(/example/image/bg-right.png) repeat-y 100% 0, #fc0; } </style> </head> <body> </body> </html>Объектная модель
Объект.style.background
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| один фон | 4 | 12 | 1 | 3.5 | 1 | 1 |
| несколько фонов | 9 | 12 | 1 | 10.5 | 1.3 | 3.6 |
| один фон | 2.1 | 1 | 10 | 3.2 |
| несколько фонов | 2.1 | 1 | 10 | 3.2 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 18.03.2018
Редакторы: Влад Мержевич
background-size | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.5+ | 3.0+ | 3.6+ | 2.1+ | 1.0+ |
Краткая информация
Версии 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.
HTML DOM Стиль фона Свойство
❮ Стиль Объект
Пример
Стиль фона документа:
document.body.style.background = «# f3f3f3 url (‘img_tree.png’) без права повтора верх «;
Попробуй сам »Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство background устанавливает или возвращает до восьми отдельных фонов свойства, в сокращенной форме.
С помощью этого свойства вы можете установить / вернуть одно или несколько из следующих значений (в любом заказ):
- цвет фона
- фоновое изображение
- фон-повтор
- фон-вложение
- background-position
- фонового размера
- фоновое происхождение
- фон-клип
Свойства выше также могут быть установлены с отдельными свойствами стиля.Использование отдельных свойств настоятельно рекомендуется для не продвинутых авторов для лучшего Управляемость.
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Недвижимость | |||||
|---|---|---|---|---|---|
| фон | 1.0 | 4,0 | 1,0 | 1,0 | 3,5 |
Примечание: См. Поддержку отдельных браузеров для каждого значения ниже.
Синтаксис
Возвращает свойство фона:
Установите свойство фона:
объект .style.background = «цветное изображение повторить вложение позиции размер исходного клипа | начальный | наследовать »
Значения недвижимости
| Значение | Описание |
|---|---|
| цвет | Устанавливает цвет фона элемента |
| изображение | Устанавливает фоновое изображение для элемента |
| повторить | Устанавливает, как будет повторяться фоновое изображение |
| приложение | Устанавливает, является ли фоновое изображение фиксированным или прокручивается на странице | .
| позиция | Устанавливает начальную позицию фонового изображения |
| размер | Устанавливает размер фонового изображения |
| происхождения | Устанавливает область позиционирования фона |
| клип | Устанавливает область рисования фонового изображения |
| начальный | Устанавливает для этого свойства значение по умолчанию.Читайте о начальной |
| наследуют | Унаследует это свойство от родительского элемента. Читать о наследовать |
Технические детали
| Значение по умолчанию: | прозрачный нет повторной прокрутки 0% 0% auto-padding-box border-box |
|---|---|
| Возвращаемое значение: | Строка, представляющая фон элемента |
| CSS версия | CSS1 + новые свойства в CSS3 |
Дополнительные примеры
Пример
Изменить фон элемента DIV:
документ.getElementById («myDIV»). style.background = «url (‘smiley.gif’) blue repeat-x center»;
Попробуй сам »Пример
Установить цвет фона для документа:
document.body.style.backgroundColor = «red»;
Попробуй сам »Пример
Установить фоновое изображение для документа:
document.body.style.backgroundImage = «url (‘img_tree.png’)»;
Попробуй сам »Пример
Установите фоновое изображение для повторения:
документ.body.style.backgroundRepeat = «repeat-y»;
Попробуй сам »Пример
Установить фиксированное фоновое изображение (не будет прокручиваться):
document.body.style.backgroundAttachment = «fixed»;
Попробуй сам »Пример
Изменить положение фонового изображения:
document.body.style.backgroundPosition = «top right»;
Попробуй сам »Пример
Возвращает значения свойств фона документа:
документ.body.style.background;
Попробуй сам »Связанные страницы
Урок CSS: CSS Background
Урок CSS3: Фоны CSS3
Ссылка CSS: свойство background
❮ Стиль объекта ,
CSS Фоновый URL — Переполнение стека
Переполнение стека- Товары
- Клиенты
- Случаи использования
- Переполнение стека Публичные вопросы и ответы
- Команды Частные вопросы и ответы для вашей команды
- предприятие Частные вопросы и ответы для вашего предприятия
- работы Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимать технический талант
- реклама Связаться с разработчиками по всему миру
Загрузка…
- Авторизоваться зарегистрироваться
текущее сообщество
- Переполнение стека Помогите чат
- Мета
CSS фоновое изображение URL — Переполнение стека
Переполнение стека- Товары
- Клиенты
- Случаи использования
- Переполнение стека Публичные вопросы и ответы
- Команды Частные вопросы и ответы для вашей команды
- предприятие Частные вопросы и ответы для вашего предприятия
- работы Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимать технический талант
- реклама Связаться с разработчиками по всему миру
Загрузка…
CSS-фонов
CSS-свойства фона используются для определения фоновых эффектов для элементов.
В этих главах вы узнаете о следующих свойствах фона CSS:
- цвет фона
- background-image
- повторение фона
- background-attachment
- background-position
CSS фоновый цвет
Свойство background-color определяет цвет фона элемента.
Пример
Цвет фона страницы устанавливается следующим образом:
цвет кузова {
: светло-синий;
}
В CSS цвет чаще всего задается с помощью:
- правильное название цвета — как «красный»
- шестнадцатеричное значение — как «# ff0000»
- значение RGB — как «rgb (255,0,0)»
Посмотрите на значения цвета CSS для полной список возможных значений цвета.
Прочие элементы
Вы можете установить цвет фона для любых элементов HTML:
Пример
Здесь элементы
,
и
цвет фона: зеленый;
}
div {
цвет фона: голубой;
}
p {
background-color:
желтый;
}
Непрозрачность / Прозрачность
Свойство opacity определяет непрозрачность / прозрачность элемента.Может принимать значение от 0,0 до 1,0. Чем ниже значение, тем прозрачнее:
Примечание: При использовании свойства opacity для добавления прозрачности к фону элемента, всех его дочерних элементов
наследовать ту же прозрачность. Это может затруднить чтение текста внутри полностью прозрачного элемента.
Прозрачность с использованием RGBA
Если вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте значения цвета RGBA .В следующем примере задается прозрачность для цвета фона, а не текста:
Вы узнали из нашей главы о цветах CSS, что вы можете использовать RGB в качестве значения цвета. В дополнение к RGB, Вы можете использовать значение цвета RGB с каналом alpha (RGB A ), которое определяет непрозрачность для цвета.
Значение цвета RGBA указывается с помощью: rgba (красный, зеленый, синий, альфа, ). альфа параметр это число между 0.0 (полностью прозрачный) и 1,0 (полностью непрозрачный).
Совет: Подробнее о цветах RGBA вы узнаете в нашей главе «Цвета CSS».
Пример
div {
background: rgba (0, 128, 0, 0.3) / * Зеленый фон с 30%
непрозрачность * /
}
,