Background 3: Backgrounder 3 — Online Custom YouTube Background Art Generator
Свойство 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-origin и background-clip — учебник CSS
background-origin и background-clip были добавлены в CSS3 как дополнительные инструменты для стилизации фона. На первый взгляд разница между этими свойствами может быть не очень понятна, но в данном уроке мы объясним, чем они отличаются, а также покажем на примерах.Background-origin: позиционирование фонового рисунка
Если свойство background-position предназначено для указания начальной позиции фонового рисунка по осям, то background-origin управляет его позицией относительно рамки (border), отступа (padding) или содержимого элемента. По умолчанию фоновый рисунок отображается, накладываясь на отступы элемента (если они есть), и не подкладывается под рамку. Это положение можно менять, используя следующие значения background-origin:
padding-box(значение по умолчанию) — фоновое изображение располагается в верхнем левом углу элемента, который является областью отступов padding.border-box— фоновое изображение располагается в верхнем левом углу элемента, который является областью рамки (при этом рамка накладывается на фон, перекрывая его часть).content-box— фоновое изображение располагается в верхнем левом углу, который принадлежит содержимому элемента.
Конечно же, настройка background-origin будет иметь смысл только при условии, что у элемента есть рамка и/или отступы. Ниже вы можете посмотреть, как работают разные значения данного свойства. Для примера мы создали блок
В нашем примере повторение фонового рисунка отключено. Что будет, если включить его? Смотрите пример:
Как видим, фоновый рисунок дублируется, но начальная точка отличается в зависимости от значения background-origin. Если рисунок будет бесшовным, то влияние background-origin может быть практически незаметным:
И еще одна особенность: наверное, вы заметили, что у самого блока background-clip.
Background-clip: свойство для обрезки фона
Свойство background-clip позволяет определять, какую область элемента фон заполняет, а какую — нет. Согласно спецификации, свойство принимает следующие значения:
padding-box— фон заполняет элемент, включая его отступы, и не заполняет область границ, так что в просветах пунктирной или точечной рамки фон не будет виден.border-box(значение по умолчанию) — фон заполняет элемент, включая область рамки (при этом рамка накладывается поверх фона). В случае с фоновым рисунком эффект данного значения будет заметен только при условии, что он повторяется.content-box— фон заполняет элемент, включая его содержимое, и не заполняет область отступов и границ.
Примеры для неповторяющегося фонового рисунка:
Примеры для повторяющегося фонового рисунка:
Заметьте, что background-clip не меняет начальную точку позиционирования фона, поэтому верхняя и левая стороны фонового рисунка могут обрезаться, если позиционирование у него осталось по умолчанию (это видно на примере с
Сочетание обоих свойств
Используя background-origin и background-clip в паре, можно исправить проблему обрезки фонового рисунка, о которой мы только что говорили. Например, следующий код заполнит фоном элемент <div> в области контента, а также задаст соответствующую начальную точку позиционирования фонового рисунка:
div {
background-clip: content-box;
background-origin: content-box;
}
Поддержка браузерами
Internet Explorer поддерживает свойства background-origin и background-clip, начиная с 9-й версии. В большинстве используемых браузеров данные свойства также работают.
Что ж, вот вы и познакомились с еще двумя интересными свойствами, которые помогают стилизовать фон. Но CSS не перестает удивлять: впереди нас ждет еще одно свойство для фоновых изображений, которое, кстати, используется повсеместно — background-size.
background | htmlbook.ru
| CSS | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 2.1 | 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.
21 великолепный эффект анимации бекграунда (фона) сайта
Дизайнеры и разработчики знают, что фоны (бекграунды) являются одним из самых важных аспектов дизайна и ощущения веб-страницы. Анимация фона (бекграунда) страницы добавляет визуальный эффект и повышает интерес пользователя.
Также анимированные бекграунды (фоны) используются для выделения функциональных, навигационных элементов сайта.
Поэтому для вашего вдохновения в этой статье собрано 21 великолепный пример эффектов анимации фона сайта.
Sakura
Rain Effect
Interactive mosaic background
Color Changing
Wave Animation
Landscape animation experiment
Floating Cloud Background
Parallax Star background in CSS
Pure CSS3 Gradient Background Animation
Canvas Parallax Skyline
Jquery & CSS3 background
Parallax backgrounds with walk cycle
Misty
Lowpoly Dynamic
Clean Slider With Curved Background
Change background colour with fade animation as you scroll
Ambient
Particles
Scrolling Terrain and Shooting Stars
Crystal Caves
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
Редакторы: Влад Мержевич
Несколько фоновых картинок | WebReference
К одному элементу можно добавить сразу несколько фоновых изображений через единственное свойство background. Это позволяет обойтись одним элементом для создания сложного фона или одной картинкой, выводя её несколько раз с различными настройками. Все изображения со своими параметрами перечисляются через запятую, при этом вначале указывается картинка которая выводится поверх остальных изображений, а последней, соответственно, самая нижняя картинка. В примере 1 показано создание фона с тремя изображениями.
Пример 1. Три фона
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Фон</title> <style> body { background: url(/example/image/animate-bg3.png) 90% 90% no-repeat fixed, url(/example/image/animate-bg2.png) 40% 40% no-repeat fixed, url(/example/image/animate-bg1.jpg) no-repeat fixed; background-size: auto, auto, cover; /* Меняем масштаб */ } </style> </head> <body></body> </html>Если требуется отдельно задать какое-то стилевое свойство для фона, вроде background-size как в примере выше, то параметры для каждого фона перечисляются через запятую. Результат данного примера показан на рис. 1.
Рис. 1. Фон с тремя изображениями
Отдельные изображения для фона позволяют менять их положение, а также анимировать, как показано в примере 2.
Пример 2. Анимированный фон
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Фон</title> <style> body { background: url(/example/image/animate-bg3.png) 90% 90% no-repeat fixed, url(/example/image/animate-bg2.png) 40% 40% no-repeat fixed, url(/example/image/animate-bg1.jpg) no-repeat fixed; background-size: auto, auto, cover; animation: ball 40s linear infinite; } @keyframes ball { from { background-position: 3000px 90%, 180% 40%, 0 0; } to { background-position: -2000px 90%, -300px 20%, 0 0; } } </style> </head> <body></body> </html>Подробнее про анимацию рассказывается далее.
Рассмотрим теперь как применять одну картинку для создания блока с рамкой (рис. 2). Ширина блока фиксированная, а высота тянется в зависимости от объёма содержимого блока.
Рис. 2. Рисованная рамка
На рисунке хорошо заметна верхняя и нижняя часть, которую требуется вырезать в графическом редакторе и расположить по горизонтали. Средняя часть выбирается таким образом, чтобы она повторялась без швов по вертикали. Картинка имеет выраженный повторяющийся орнамент, так что трудностей с выделением быть не должно. В итоге получится такое подготовленное изображение (рис. 3). Клетчатое поле обозначает прозрачность, оно позволяет задавать наряду с изображениями цветной фон и легко менять его через стили.
Рис. 3. Подготовленное для фона изображение
Сам фон выводится свойством background, оно же задаёт и координаты нужного фрагмента. Параметры каждого фона перечисляются через запятую и в данном случае имеет значение их порядок. Нам требуется, чтобы верхняя и нижняя часть блока не перекрывались, поэтому ставим их первыми (пример 3). Цвет фона указывается последним.
Пример 3. Несколько фоновых картинок
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Фон</title> <style> .aztec { width: 212px; /* Ширина блока с учётом padding */ min-height: 240px; /* Минимальная высота */ background: url(/example/image/aztec-bg.png) 0 0 no-repeat, url(/example/image/aztec-bg.png) -576px 100% no-repeat, url(/example/image/aztec-bg.png) -288px 0 repeat-y, #f3dbb3; padding: 38px; /* Поля вокруг текста с учётом границы */ } </style> </head> <body> <div> <p>Уицилопочтли — «колдун колибри», бог войны и солнца.</p> <p>Тескатлипока — «дымящееся зеркало», главный бог ацтеков.</p> <p>Обоим богам приносили человеческие жертвы.</p> </div> </body> </html>Первый фон выводит верхнюю границу блока, второй фон — нижнюю, а третий вертикальные границы. Последним идёт цвет, который виден в прозрачной центральной части блока (рис. 4).
Рис. 4. Вид рамки
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Свойство background | Справочник CSS
basicweb.ru- HTML
- Учебник HTML
- Справочник тегов
- Атрибуты событий
- Глобальные атрибуты
- Коды языков
- Мнемоники
- Цвета
- Тесты знаний
- CSS
- Учебник CSS
- Справочник свойств
- Селекторы
- Обязательства
- Правила
- Flexbox генератор
- Сетевой генератор
- Учебник МЕНЬШЕ
- JavaScript
- Интерфейсы веб API
- Объект Массив
- Дата размещения
- Объект Функция
- Объект Global
- Объект JSON
- Объект Математика
- Номер объекта
- Объект Объект
- Объект RegExp
- Обещание объекта
- Строка объекта
- jQuery
- Селекторы
- События
- Методы ДОМ
- Перераз
- Утилиты
- Эффекты
- AJAX
- Объект Обратные звонки
- Объект отложен
HTML
- HTML учебник
- Справочник тегов
- Атрибуты событий
- Глобальные атрибуты
- Мнемоники
- Коды языков
- HTML цвета
- Тесты знаний
CSS
- Учебник CSS
- Справочник свойств
- CSS селекторы
- CSS функции
- Правила CSS
- Flexbox генератор
- Сетевой генератор
- МЕНЬШЕ учебник
JavaScript
- Интерфейсы веб API
- Объект Массив
Свойства background-origin и background-clip — учебник CSS
Свойства background-origin и background-clip были добавлены CSS3 как дополнительные инструменты для стилизации фона. На первый взгляд между указанными свойствами может быть не очень понятна, но в данном уроке мы объясним, чем они отличаются, а также покажем на примерах.
Background-origin: позиционирование фонового рисунка
Если свойство background-position предназначено для начальной позиции фонового рисунка по осям, то background-origin управляет его позицией относительно рамки (границы), отступа (заполнения) или содержимого элемента.По умолчанию фоновый рисунок отображается, накладывается на отступы элемента (если они есть), и не подкладывается под рамку. Это положение можно менять, используя следующие значения background-origin:
-
padding-box(по умолчанию) — фоновое изображение в верхнем левом углу элемента, которое является областью отступов padding. -
border-box— фоновое изображение в верхнем левом углу элемента, которое является областью рамки (при этой рамке накладывается на фон, перекрывая его часть). -
content-box— фоновое изображение в верхнем левом углу, который принадлежит содержимому элемента.
Конечно же, настройка background-origin будет иметь смысл только при условии, что у элемента есть рамка и / или отступы. Ниже вы можете посмотреть, как работают разные значения данного свойства. Для создания мы создали блок В нашем примере повторение фонового рисунка отключено. Что будет, если включить его? Смотрите пример: Как видим, фоновый рисунок дублируется, но начальная точка отличается в зависимости от значения background-origin. Если рисунок будет бесшовным, то влияние background-origin может быть практически незаметным: И еще одна особенность: наверное, вы заметили, что у самого блока Свойство Примеры для неповторяющегося фонового рисунка: Примеры для повторяющегося фонового рисунка: Заметьте, что background-clip не меняет начальную точку позиционирования фона, поэтому верхняя и левая стороны фонового рисунка могут обрезаться, если позиционирование у него осталось по умолчанию (это видно на примере с Используя Internet Explorer поддерживает свойства background-origin и background-clip, начиная с 9-й версии.В большинстве используемых браузеров данные свойства также работают. Что ж, вот вы и познакомились с еще двумя интересными свойствами, которые стилизовали фон. Но CSS не перестает удивлять: впереди нас ждет еще одно свойство для фоновых изображений, которое, кстати, используется повсеместно — background-size. Универсальное свойство background позволяет установить до одновременно пяти характеристик фона.Значения
может идти в любом порядке, браузер сам определит, какое из них соответствует
нужному свойству. Для подробного ознакомления смотрите
информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую. Здесь: <фон> = [прикрепленный фон || изображение на заднем плане
|| фоновая позиция || фон-повтор] | унаследовать <последний_фон> = [background-attachment || цвет фона || изображение на заднем плане
|| фоновая позиция || фон-повтор] | унаследовать Если наряду с фоновыми изображениями требуется указать цвет фона элемента, он указывается в последнюю очередь после перечисления. Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке.
Ни одно значение не является обязательным,
поэтому неиспользуемые можно опустить. наследовать наследует значение у родительского элемента. Пример 1 XHTML 1.0CSS2.1IECrOpSaFx Результат данного примера показан ниже (рис.1). Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера Пример 2 HTML5CSS3IECrOpSaFx [окно.] document.getElementById («elementID»). style.background Internet Explorer до версии 7.0 включительно не поддерживает значение наследования. Универсальное свойство background позволяет установить одновременно несколько характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. Допустимо, также указывать параметры сразу нескольких фонов, перечисляя их через запятую. Здесь: <фон> = background-image || положение фона [/ размер фона]? || фон-повтор || фон-вложение || фон-происхождение || background-clip <последний_фон> = background-image || положение фона [/ размер фона]? || фон-повтор || фон-вложение || фон-происхождение || фон-клип || background-color Если наряду с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления. Любые значения значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно не является обязательным, поэтому используемое значение неиспользуемое можно опустить. Результат данного примера ниже (рис. 1). Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера Объект .style.background Каждая спецификация проходит несколько стадий одобрения. В таблице приведенных ниже обозначений. Число указывает версию, начиная с свойства, имеющего свойство. Автор: Влад Мержевич Последнее изменение: 18.03.2018 Редакторы: Влад Мержевич
background-clip . Фон-клип: свойство для обрезки фона
background-clip позволяет определять, какую область элемента фон заполняет, а какую — нет. Согласно спецификации, принимает следующие значения: padding-box — фон заполняет элемент, включая его отступы, так что в просветах пунктирной или точечной рамки фон не будет виден. border-box (значение по умолчанию) — фон заполняется элемент, включая область рамки (при этой рамке накладывается поверх фона). В случае с фоновым рисунком эффект данного значения будет заметен только при условии, что он повторяется. поле содержимого — фон заполняет элемент, включая его содержимое, и не заполняет область отступов и границ.
background-clip: content-box ) . Сочетание обоих свойств
background-origin и background-clip в паре, можно исправить проблему обрезки фонового рисунка, о которой мы только что говорили. Например, следующий код заполнит фоном элемент
div {
фон-клип: контент-поле;
фон-происхождение: содержимое-поле;
}
Поддержка браузерами
фон | htmlbook.ru
CSS Internet Explorer Хром 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 Описание
Синтаксис
Значения
Объектная модель
Браузеры
фон | CSS | WebReference
Краткая информация
Значение по умолчанию прозрачный || нет || повторить || прокрутка || 0% 0% Наследуется Нет Применяется Ко всем элементам Анимируется Да Синтаксис
фон: [<фон>,] * <последний_фон_ > Обозначения
Описание Пример <тип> Указывает тип значения. <размер> A && B Значения должны выводиться в указанном порядке. <размер> && <цвет> A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). нормальный | малые шапки A || B Каждое личное дело самостоятельно или с другими в произвольном порядке. ширина || count [] Группирует значения. [урожай || крест] * Повторять ноль или больше раз. [, <время>] * + Повторять один или больше раз. <число> + ? Указанный тип, слово или группа не является обязательным. вставка? {A, B} Повторять не менее A, но не более B раз. <радиус> {1,4} # Повторять один или больше раз через запятую. <время> # Значения
Пример
Объектная модель
Спецификация
Браузеры
Один фон 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 Браузеры
Автор и редакторы
