background-origin в CSS


background-origin

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

Тип свойства

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

Значения

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

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

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

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

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

Синтаксис

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

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

background-origin

Easily manage projects with monday.com

The background-origin property defines where to paint the background: across the whole element, inside the border, or inside the padding.

There are four values: border-box , padding-box , content-box and inherit . Here’s a demo:

background-origin is similar to background-clip, except it resizes the background rather than clipping it.


The above example has background-size: cover and background-repeat: no-repeat also applied. If that wasn’t the case, the image would repeat underneath the border or padding.

CSS | свойство background-origin

Background-origin — это свойство, определенное в CSS, которое помогает в настройке фонового изображения веб-страницы. Это свойство используется для установки происхождения изображения на заднем плане. По умолчанию это свойство устанавливает источник фонового изображения в верхнем левом углу экрана / веб-страницы.

Синтаксис:

Стоимость имущества:

    начальный: это принимает начальное значение / значение по умолчанию для установки фонового источника к краю отступа в верхнем левом углу.

CSS :: Свойство background-origin

css -свойство background-origin (от англ. background origin – начало изображения) задает позиционирование фонового изображения относительно границ, отступов и содержимого элемента.

Если значение свойства background-attachment указано, как fixed , свойство background-origin не применяется.

Характеристики

  • Значение по умолчанию: padding-box .
  • Применяется: ко всем элементам .
  • Наследуется: нет .
  • Анимируется: нет .
  • JavaScript: object.style.backgroundOrigin=»value» .

Синтаксис

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


Значения

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

Разрешается указывать через запятую несколько параметров в случае использования более одного фонового изображения.

The CSS Background-Origin Property

Contents

Background origin explained

The CSS background-origin property is used to specify where to position the background image:

It might seem similar to background-clip, but the background is resized and not clipped.

Note: this property does not have any effect if background-attachment is set to fixed.

Syntax for the background origin

The syntax for the CSS background-origin property is rather simple:

In the following section, we will explain the three available values.

Theory is great, but we recommend digging deeper!
Responsive Web Design Course: Learn How to Make a Responsive Website

BitDegree Foundation VSI ©

Илон Маск рекомендует:  @supports в CSS


Property values

The area of each element in CSS can be defined by one of three boxes:

  • the content box holds the content of the element
  • the padding box holds the content and its padding
  • the border box holds the content, the padding and the border

With CSS background-origin , you can define the position of the background in relation to each of these boxes:

СSS3 Backgrounds

В СSS3 появилось несколько новых свойств background , которые позволяют лучше контролировать цвет фона HTML :

  • background-size ;
  • background-origin ;
  • background-clip .

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает то или иное свойство. Числа с -webkit- , -moz- или -O- указывают первую версию, которая поддерживает с префиксом:

Свойство Google chrome IE Mozilla Safari Opera
background-image 4.0 9.0 3.6 3.1 11.5
background-size 4.0

1.0 -webkit- 9.0 4.0

3.6 -moz- 4.1

3.0 -webkit- 10.5

10.0 -o- background-origin 1.0 9.0 4.0 3.0 10.5 background-clip 4.0 9.0 4.0 3.0 10.5

CSS3 множественные фоны

CSS3 позволяет добавить несколько фоновых изображений для одного элемента через свойство background-image . Они разделяются запятыми и накладываются друг на друга. При этом первое изображение находится ближе всего к пользователю.

В следующем примере первое — изображение цветка ( выравнивается по нижнему правому краю ), а второе — представляет собой фон ( выравнивается по верхнему левому углу ):


Можно задать несколько фоновых изображений с помощью отдельных свойств фона ( как показано выше ) или сокращённого свойства background .

В следующем примере используется сокращённое свойство background ( результат такой же, как в примере выше ):

CSS3 размер фона

Перед тем, как сделать цвет фона в HTML , нужно понимать, что в CSS3 свойство background-size позволяет указать размер фоновых изображений. До этого использовался фактический размер изображения. CSS3 позволяет повторно использовать фоновые изображения в различных контекстах.

Размер может быть указан в единицах длины, процентах или с помощью одного из двух значений: contain или cover .

Следующий пример уменьшает фоновое изображение по сравнению с исходным изображением ( с использованием пикселей ):

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

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

Следующий пример иллюстрирует использование contain и cover :

Определение размеров множественных фоновых изображений

Свойство background-size также принимает несколько значений для размера фона ( использует список значений, разделенных запятыми ) при работе с несколькими изображениями.

Следующий пример определяет три фоновых изображения с разным значением размера фона для каждого изображения:

Полный размер фонового изображения

Как задать цвет фона в HTML или изображение, которое охватывает все окно браузера.

Требования заключаются в следующем:

  • Заполнить всю страницу изображением ( без пробелов );
  • Масштабировать изображение по мере необходимости;
  • Центрировать изображение на странице;
  • Не вызывать скроллбары.

В следующем примере показано, как это сделать. Используйте HTML-элемент ( всегда подстраивается под высоту окна браузера ). Затем установите в нем фиксированный и центрированный фон, и его размер с помощью свойства background-size :


CSS3 свойство background-origin

В CSS3 свойство background-origin определяет расположение и размеры области отображения фонового изображения или HTML цвета фона страницы.

Свойство принимает три различных значения:

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

Следующий пример иллюстрирует свойство background-origin :

CSS3 background-clip

CSS3 свойство background-clip управляет тем, как HTML цвет фона текста или фоновое изображение выводится относительно границ.

Оно принимает три различных значения:

  • border-box — ( по умолчанию ) фоновое изображение не обрезается.
  • padding-box — обрежет фон по внутреннему краю области рамки.
  • content-box — обрежет фон по краю области содержимого.

Следующий пример иллюстрирует свойство background-clip :

CSS3 свойства фона

Свойство Описание
background Сокращенное свойство для установки всех фоновых свойств в одном объявлении.
background-clip Управляет обрезкой фона.
background-image Определяет одно или несколько фоновых изображений для элемента.
background-origin Определяет расположение фонового изображения (изображений)
background-size Определяет размер фонового изображения (изображений)

Данная публикация представляет собой перевод статьи « CSS3 Backgrounds » , подготовленной дружной командой проекта Интернет-технологии.ру

Свойство background-origin

Обратите внимание: данное свойство поддерживается в IE9+, Chrome, Firefox, Opera и Safari.

С помощью нового CSS3 свойства background-origin Вы можете установить как должно вычисляться положение элемента относительно границ его родительского элемента.

Данное свойство может иметь следующие значения:


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

CSS background-origin

The CSS background-origin property was introduced in CSS3 for the purposes of setting the background positioning area of an element.

The background-origin property allows you to specify whether the background will be positioned relative to the «content box», «border box», or the «padding box».

The background-origin property can be used in conjunction with the background-clip and background-image properties to modify the position of a background image to match the clipping effect (supplied by the background-clip property).

In CSS3, the background-origin property has been added to the background shorthand property. This means that you can set the background-origin from within the background property (for example, background: url(«background.png») 40% / 10em lightblue round fixed border-box; ).

Syntax

The formal syntax for this property is:

Below is an explanation of these values.

Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Example Code

Basic CSS

Working Example within an HTML Document

CSS Specifications


  • The background-origin property is defined in CSS Backgrounds and Borders Module Level 3 (W3C Candidate Recommendation 9 September 2014)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

CSS3 background-origin Property

Description

The background-origin CSS property specifies the positioning area of the background, that is the position of the origin of an image specified using the background-image property.

The following table summarizes the usages context and the version history of this property.

Default value: padding-box
Applies to:
Inherited: No
Animatable: No. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

border-box | padding-box | content-box | initial | inherit

The example below shows the background-origin property in action.


Example

Note: The background-origin property is ignored if the value of background-attachment property is specified as fixed .

Property Values

The following table describes the values of this property.

Value Description
border-box Specifies that the background extends to the outside edge of the border. Background is drawn below the border.
padding-box Specifies that the background extends to the outside edge of the padding. No background is drawn below the border. This is default value.
content-box Specifies that the background is painted within (clipped to) the content box only. No background is drawn below the border and padding area.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element background-origin property.

Browser Compatibility

The background-origin property is supported in all major modern browsers.

CSS background-origin

The background-origin property sets the background positioning area of an element. In other words, it specifies the original position (of top left corner) of the background image of an element.

The background can be positioned relative to content box, padding box or border box. To understand what constitutes these boxes, have a look at what a CSS box model looks like

CSS Box Model

The box model of an element contains four boxes — content box, padding box, border box and margin.

Content box contains all the content like text, images, tables, of the element.

Padding box consists of the content box along with padding. Padding is the area around the content of the element that separates it from the border. Any background color or image set to the element extends to the padding area also.

Border box consists of the padding box along with borders.

Lastly, the margin area is an empty area that surrounds the border area. It is used to separate the element from other elements which are its neighbours. The larger the margin, more is the distance of the element from its neighbours.

Values

padding-box : Background image origin (its top left corner) is at the top left corner of the padding box. This is the default value.

content-box : Background image origin (its top left corner) is at the top left corner of the content box.

border-box : Background image origin (its top left corner) is at the top left corner of the border box.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

Example

The above demo shows the background image origin for different values of the background-origin property.

Giving different values for different background images

If you want to set different origins for different background images of an element, then you need to give multiple comma-separated values to the background-origin property.

The first value (before first comma) sets the origin of the first background image, the second value for the second image, and so on. If only one value is given, then it will set the origin of all the background images of the element.

In the above example, the first value content-box sets the origin of the first background image ‘trees.png’ at the top left corner of the content box, whereas the second value border-box sets the origin of the second background image ‘forest.jpg’ at the top left corner of the border box.

The demo for this example is shown below.

Browser Support

This property is supported in all modern browsers. Multiple background images are not supported in IE8 and earlier versions.

Илон Маск рекомендует:  Кнопка для прокрутка страницы вверх
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL