Background origin: background-origin — CSS: Cascading Style Sheets

background-origin | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+4.0+10.1+10.5+3.1+5.0+3.6+4.0+2.1+3.0+1.0+

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

Значение по умолчанию padding-box
НаследуетсяНет
ПрименяетсяКо всем элементам
Процентная записьНеприменима
Ссылка на спецификацию http://www.w3.org/TR/css3-background/#background-origin

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

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

Значения

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

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

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

padding-box border-box content-box

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

Пример

HTML5CSS3IECrOpSaFx

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

Браузеры

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

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

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

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

Цвет и фон

CSS по теме

  • background-origin

Статьи по теме

Рецепты CSS

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.

padding-box border-box content-box

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

Песочница

padding-box border-box content-box

div {
  border: 5px dashed #c26558;
  padding: 20px;
  background-origin: {{ playgroundValue }};
}

Пример

<!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.

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

Спецификация Статус
CSS Backgrounds and Borders Module Level 3 Возможная рекомендация

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

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

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

Браузеры

9 12 1 10.1 10.5 3.1 5 3.6 4
2.1 3 3.6 4 10. 5 3.2 5

Браузеры

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

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

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

Цвет и фон

См. также

  • background
  • background-attachment
  • background-clip
  • background-image
  • background-position
  • background-repeat
  • background-size
  • Установка фона и градиента

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

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

Последнее изменение: 29. 02.2020

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

css — Почему background-origin не работает в теле

спросил

Изменено 3 года, 4 месяца назад

Просмотрено 144 раза

Background-origin успешно протестирован в div, но не в теле https://chestnuttree.github.io/helloWord/pic1.png

Затем я обнаружил, что background-origin of body работает, добавляя цвет фона к родительскому элементу body, HTML https://chestnuttree.github.io/helloWord/pic2.png

 тело {
  отступ: 10 пикселей;
  фон: url(/i/eg_bg_03.gif) без повторов #58a внизу справа;
  background-origin: поле содержимого;
}

HTML {
  фон: #fff;
} 

Почему?

2

Фон, примененный к элементу body, особенный, потому что он будет распространяться на html, а затем на холст:

Для документов, корневым элементом которых является элемент HTML HTML или элемент html XHTML [HTML]: если вычисленное значение background-image в корневом элементе равно нулю, а его фоновый цвет прозрачен, пользовательские агенты должны вместо этого распространять вычисленное значения свойств фона из первого дочернего элемента HTML BODY или XHTML body этого элемента. Используемые значения фоновых свойств этого элемента BODY являются их начальными значениями, а распространяемые значения обрабатываются так, как если бы они были указаны для корневого элемента. Авторам документов HTML рекомендуется указывать фон холста для элемента BODY, а не для элемента HTML.

красный

В приведенном ниже примере я применяю фон к телу, но на самом деле эти свойства применяются к html, поэтому заполнение не влияет на вычисление источника.

 корпус {
  отступ: 10 пикселей;
  фон: url(https://picsum.photos/id/10/50/50) без повтора #58a внизу справа;
  background-origin: поле содержимого;
  маржа: 0;
  высота:100вх;
  box-sizing:border-box;
} 

Вместо этого добавьте отступы в html и background-origin будет работать:

 тело {
  фон: url(https://picsum.photos/id/10/50/50) без повтора #58a внизу справа;
  background-origin: поле содержимого;
  маржа: 0;
  высота:100%;
  отступ: 10 пикселей;
  box-sizing:border-box;
}

HTML {
  отступ: 10 пикселей;
  высота:100%;
  box-sizing:border-box;
} 

Или примените к html фон отличный от прозрачный и вы остановите распространение:

 body {
  фон: url(https://picsum. photos/id/10/50/50) без повтора #58a внизу справа;
  background-origin: поле содержимого;
  маржа: 0;
  высота:100%;
  отступ: 10 пикселей;
  box-sizing:border-box;
}

HTML {
  отступ: 10 пикселей;
  высота:100%;
  box-sizing:border-box;
  фон:красный;
} 

0

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Поздоровайтесь с Background-Origin и Background-Clip, CSS Новые возможности! | by Elad Shechter

Привет всем, в этом совете мы поговорим о двух новых расширенных свойствах, которые были добавлены в CSS3 к свойству фона.

(Это сообщение было первоначально опубликовано в июне 2013 года и обновлено, поскольку оно актуально и сегодня)

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

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

Live Example

background-origin позволяет вам решить, где вы хотите установить начальную точку background-position: на границе, отступе или содержимом.

Новое свойство background-origin имеет 3 возможных значения в соответствии с box-model:

  1. border-box — фоновая позиция 0,0 поместит изображение вверху слева от границы.
  2. padding-box (по умолчанию) — фоновая позиция 0,0 поместит изображение в верхний левый угол отступа.
  3. content-box — фоновая позиция 0,0 поместит изображение вверху слева от содержимого.

Живой пример

На верхнем снимке экрана/примере видно влияние значений background-origin.

Как вы можете видеть в последнем примере, background-origin хорош, но чего-то все же не хватает. Изображение позиционируется в соответствии с источником фона, но выходит за правую/нижнюю часть границы/отступа.

Фон-клип — ответ! Используя background-clip, мы можем решить, где вырезать фоновое изображение, точно так же, как мы устанавливаем значения background-origin.

Новое свойство background-clip имеет 3 возможных значения:

  1. border-box(по умолчанию) — показать изображение полностью, ничего не обрезать.
  2. padding-box — обрезать рамку background-image.
  3. content-box — обрезать рамку и отступы background-image.

Живой пример

Как вы можете видеть в последнем примере, background-origin и background-clip хорошо работают вместе, и большую часть времени вы будете использовать оба с одинаковыми значениями. Например, предположим, что вы используете оба значения со значением «content-box» для позиционирования фонового изображения над содержимым и обрезки фонового изображения на отступах и границах.

С этим свойством можно делать и более красивые вещи. например: я центрировал фоновое изображение, а в первой строке сохранил полный размер фона и одновременно играл с фоновым источником и фоновым клипом. Во второй строке этого примера я растянул размер фонового изображения, чтобы он соответствовал всему блоку, используя свойство background-size, и снова поиграл со свойствами background-origin и background-clip одновременно.

Живой пример

Результаты скриншотов для этого примера

Как видите, с помощью этих двух новых функций можно создавать отличные вещи.

Это все для background-origin и background-clip.

  • Работает во всех браузерах.
  • IE — работает с IE9 и выше.

Если вам понравился этот пост, вам также могут понравиться:
— Новая фоновая позиция в CSS3

Вот и все,

Я Элад Шехтер, веб-разработчик, специализирующийся на дизайне и архитектуре CSS и HTML, работаю в Investing.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *