Css background origin: CSS background-origin property – background-origin | CSS | WebReference

background-origin | CSS | WebReference

Свойство background-origin определяет область позиционирования фонового рисунка. Это свойство не применяется, когда значение background-attachment задано как fixed.

Краткая информация

Значение по умолчаниюpadding-box
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяНет

Синтаксис

background-origin: [padding-box | border-box | content-box] 
  [, [padding-box | border-box | content-box]]*

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

padding-box
Фон позиционируется относительно края элемента с учетом толщины границы.
border-box
Фон позиционируется относительно границы, при этом линия границы может перекрывать изображение.
content-box
Фон позиционируется относительно содержимого элемента.

Значений может быть несколько (для каждого из множественных фоновых рисунков), при этом значения разделяются между собой запятой.

Результат использования значений свойства background-origin для элемента с рамкой толщиной 20 пикселей показан на рис. 1.

Рис. 1а
Рис. 1аРис. 1а
padding-box border-box content-box

Рис. 1. Результат применения разных значений

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-origin</title> <style> .example { border: 20px solid #fc0; padding: 20px; height: 200px; background: url(/example/image/figure.jpg) no-repeat; background-origin: content-box; } </style> </head> <body> <div>...</div> </body> </html>

Объектная модель

Объект.style.backgroundOrigin

Примечание

Если фон задан один, а значений background-origin несколько, то браузеры покажут разное поведение. Firefox и Opera используют первое значение, Chrome и Safari создадут несколько фоновых рисунков.

Safari до версии 5, Android до версии 3 поддерживают свойство -webkit-background-origin.

Opera до версии 10.5 поддерживает свойство -o-background-origin.

Firefox до версии 4 поддерживает свойство -moz-background-origin.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 29.02.2020

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

background-origin - Веб-технологии для разработчиков

background-originChrome Полная поддержка 1
Полная поддержка 1
Нет поддержки 1 — 64С префиксом
Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Chrome accepts alternate synonyms to its values: padding, border, and content.
Edge Полная поддержка 12Firefox Полная поддержка 4
Полная поддержка 4
Полная поддержка 49
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 1 — 4С префиксом Замечания
С префиксом
Требует вендорный префикс: -moz-
Замечания Used the -moz-background-clip: padding | border syntax.
IE Полная поддержка 9
Полная поддержка 9
Замечания In IE 7 and before, Internet explorer was behaving as if background-origin: border-box was set. In Internet Explorer 8, as if background-origin: padding-box, the regular default value, was set.
Opera Полная поддержка 10.5
Полная поддержка 10.5
Нет поддержки 15 — 51С префиксом
Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Opera accepts alternate synonyms to its values: padding, border, and content.
Safari Полная поддержка 3
Полная поддержка 3
Полная поддержка 3С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Webkit accepts alternate synonyms to its values: padding, border, and content.
WebView Android Полная поддержка
4.1
Полная поддержка 4.1
Нет поддержки 4.1 — 64С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания WebView accepts alternate synonyms to its values: padding, border, and content.
Chrome Android Полная поддержка 18
Полная поддержка 18
Нет поддержки 18 — 64С префиксом Замечания
С префиксом
Требует вендорный префикс: -webkit-
Замечания Chrome accepts alternate synonyms to its values: padding, border, and content.
Firefox Android Полная поддержка 14
Полная поддержка 14
Полная поддержка 49
С префиксом Требует вендорный префикс: -webkit-
Opera Android Полная поддержка 11
Полная поддержка 11
Нет поддержки 14 — 47С префиксом
Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Opera accepts alternate synonyms to its values: padding, border, and content.
Safari iOS Полная поддержка 1
Полная поддержка 1
Полная поддержка 1С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Webkit accepts alternate synonyms to its values: padding, border, and content.
Samsung Internet Android
Полная поддержка
1.0
Полная поддержка 1.0
Нет поддержки 1.0 — 9.0С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Chrome accepts alternate synonyms to its values: padding, border, and content.
content-boxChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 4IE Полная поддержка 9
Полная поддержка 9
Замечания In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll.
Opera Полная поддержка 10.5Safari Полная поддержка 3WebView Android Полная поддержка 4.1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 14Opera Android Полная поддержка 11Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0

Свойство background-origin | CSS справочник

CSS свойства

Определение и применение

CSS свойство background-origin определяет как позиционируется фоновое изображение/-я по отношению к рамке, отступу и содержимому элемента. Размер фоновых изображений может быть изменён свойством background-size.

Если свойство background-attachment имеет значение "fixed", то свойство background-origin не окажет никакого эффекта.

А в чем заключается разница между свойством background-origin и background-clip? Разница заключается в том, что свойство background-clip в отличие от background-originобрезает ту часть фона, которая выходит из указанных рамок. Свойство background-origin лишь определяет, как позиционируется фоновое изображение.

Поддержка браузерами

CSS синтаксис:

background-origin:"padding-box | border-box | content-box | initial | inherit";

JavaScript синтаксис:

object.style.backgroundOrigin = "padding-box"

Значения свойства

ЗначениеОписание
padding-boxФоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон). Это значение по умолчанию.
border-boxФоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента).
content-boxФоновое изображение позиционируется от верхнего левого угла содержимого элемента.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Работа с фоновым  изображением в CSS</title>
<style> 
div {
width : 10em; /* устанавливаем ширину блока */
height : 10em; /* устанавливаем высоту блока */
border : 5px dashed orange; /* устанавливает пунктирную границу размером 5px оранжевого цвета */
background-image : url(manul.jpg); /* указываем путь к файлу, который будет использоваться как фоновое изображение */
background-repeat : no-repeat; /* указываем, что фоновое изображение не будет повторяться */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right : 15px; /* устанавливаем величину отступа от правого края элемента */
padding : 15px; /* устанавливаем величину внутреннего отступа для всех сторон элемента */
color : yellow; /* устанавливаем цвет шрифта желтый */
}
.test   {background-origin : padding-box;}  /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон) */
.test2 {background-origin : border-box;}  /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента со всех сторон) */
.test3 {background-origin : content-box;}  /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла содержимого элемента (изображение не заходит под границу элемента с этих сторон) */
</style>
</head>
	<body>
		<div class = "test">padding-box</div>
		<div class = "test2">border-box</div>
		<div class = "test3">content-box</div>
	</body>
</html>
Работа с фоновым изображением в CSS (свойство background-origin).CSS свойства

seodon.ru | CSS справочник - background-origin

Опубликовано: 18.08.2010 Последняя правка: 10.12.2015

Изначально фоновое изображение позиционируется относительно внутренних краев рамки элемента. Используя свойство CSS background-origin можно изменить область HTML-элемента, относительно которой будет происходить это позиционирования.

Тип свойства

Назначение: цвет и фон.

Применяется: ко всем элементам.

Наследуется: нет.

Значения

Значением свойства background-origin является одно из ключевых слов, определяющее область позиционирования.

  • padding-box — область позиционирования охватывает содержимое элемента с учетом его внутренних отступов (padding). Другими словами она простирается до внутренних краев рамки элемента.
  • border-box — область позиционирования охватывает все до внешних краев рамки. Поэтому, если рамка имеет ненулевую толщину, часть фоновой картинки будет скрыта под ней.
  • content-box — область охватывает только содержимое элемента, не включая внутренние отступы и рамку, если они присутствуют.

Процентная запись: не существует.

Значение по умолчанию: padding-box.

Свойство background-origin не будет работать, если background-attachment имеет значение fixed.

Синтаксис

background-origin: padding-box | border-box | content-box

Пример CSS: использование background-origin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство background-origin</title>
  <style type="text/css">
   div {
    width: 200px; /* ширина блоков DIV */
    height: 41px; /* высота DIV */
    text-align: right; /* выравнивание текста по правому краю */
    background: url('images/fly.gif') no-repeat; /* изображение-фон с запретом размножения */
    border: #000 10px solid; /* стиль рамки */
    margin: 5px; /* размер внешних полей */
    padding: 10px; /* внутренние отступы */
   }
   .div2 {
    background-origin: border-box; /* фон со значением padding-box */
   }
   .div3 {
    background-origin: content-box; /* фон со значением content-box */
   }
  </style>
 </head>
 <body>
  <div>DIV с padding-box.</div>
  <div>DIV с border-box.</div>
  <div>DIV с content-box.</div>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS background-origin.

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:До 9.09.0 и вышеДо 4.04.0 и вышеДо 4.04.0 и вышеДо 10.510.5 и вышеДо 5.05.0 и выше
Поддержка:НетДаНетДаНетДаНетДаНетДа

Отправить ответ

avatar
  Подписаться  
Уведомление о