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

Leave a Comment / Css / By /

➥ background-origin — htmlbook.info

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.
1		CSS 3
    

Описание

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

Синтаксис

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

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

 

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-boxborder-boxcontent-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(images/figure.jpg) no-repeat;

background-origin: content-box;

</style>

</head>

<body>

<div class=«example»>…</div>

</body>

</html>

<!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 class=»example»>…</div>

</body>
</html>

 

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

Властивість background-origin було додано в CSS3 і вона визначає область позиціонування фонового зображення (точку, з якої почнеться тло). Тло може починатися від внутрішнього краю грані елементу, від зовнішньої краю грані або тільки в зоні контенту.

На жаль цей малюнок не може наочно показати поведінку, котру задає ця властивість, але ти можеш подивитися 1 приклад.

background-origin схоже на background-clip, але перша властивість просто змінює розмір фону, а друга обрізає його.

Цю властивість можна використовувати у скороченому записі background, наприклад:

background: url("background. png") 40% / 10em lightblue round border-box;

Якщо background-origin не прописана спеціально, вона отримує значення без задання: padding-box.

Для потрібного ефекту потрібно також використовувати background-repeat: no-repeat;, в протилежному випадку, фонове зображення буде повторюватися й за межу вмісту.

Ця властивість не застосовується, коли значення background-attachment задано як fixed

.

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

Порада:

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

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

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

Властивість background-origin може отримувати 5 значень:

padding-box

Фон позиціонується щодо краю елемента з урахуванням товщини кордону

border-box

Фон позиціонується відносно кордону, при цьому лінія кордону може перекривати зображення

content-box

Фон позиціонується відносно вмісту елемента

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивостей від свого батьківського елемента

Значення без задання:padding-box
Наслідує:Ні
Анімується:Ні
JavaScript синтаксис:object. style.backgroundOrigin=»content-box»

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач
background-origin

4.0

9.0

4.0

3.0

10.5

Переглядач
background-origin

3. 0

4.0

5.0

Приклади

  • Приклад 1
  • Приклад 2
  • Приклад 3
  • Приклад 4
  • Приклад 5
  • Приклад 6

Динамічний приклад

Демонстрація роботи властивості​
Демонстрація роботи властивості
Демонстрація роботи властивості​
Демонстрація роботи властивості
Синтаксис властивості
.box {


  background-origin: padding-box;


}	
Додаткові посилання
background-color
background-position
background-size
background-image
background-blend-mode
background-attachment
background-repeat
background-clip
background
 CSS | свойство background-origin — GeeksforGeeks 
 Улучшить статью
 Сохранить статью
  •  Уровень сложности:
Средний
  •  Последнее обновление:
30 июн, 2022
  •  Читать
  •  Обсудить
    •  Улучшить статью
     Сохранить статью
      background-origin  — это свойство, определенное в CSS, которое помогает настроить фоновое изображение веб-страницы.
     
     Это свойство используется для установки происхождения изображения в фоновом режиме. По умолчанию это свойство устанавливает источник фонового изображения в верхний левый угол экрана/веб-страницы.
      Синтаксис:   
     background-origin: padding-box|border-box|content-box|initial|
наследовать; 
      Значение свойства:    
      начальное значение:  Принимает начальное значение/значение по умолчанию для установки исходной точки фона на край заполнения в верхнем левом углу.
    •   Синтаксис:   
     background-origin: initial; 
    •   Пример:   
     HTML 
       
      <  HTML  > 
     9003
      <   >
      <   >
      <   966696666666666666666666666166666666666666166166616669006RILILILILILILILILIGILILIAL 9. RILILILILILILILILILIGILILIALIN   Название  > 
        <  Стиль  > 
        .GFG {
    .                отступы: 40 пикселей; 
                     ширина: 400 пикселей; 
                     background-image: 
                     background-repeat: без повтора; 
                     background-origin: initial; 
                     граница: 1 пикс. двойная; 
                     text-align: justify; 
                 } 
               style   > 
        head   > 
      
      <   body   > 
             <  DIV   Класс   =   "GFG"  > 
      
      <
      <0061  p   > 
                   Prepare for the Recruitment drive of product 
                   based companies like Microsoft, Amazon, Adobe 
                   etc with a free online placement preparation 
        курс. Курс посвящен различным вопросам MCQ 
                   и вопросам кодирования, которые, вероятно, будут заданы в 
                   собеседования и сделайте свое предстоящее трудоустройство 
                   сезон эффективным и успешным. 
                   p   > 
      
      
               div   > 
        body   > 
      
        HTML  > 
    •   Выход: 
      Блюдинг-Бокс: . Эта свойство используется для установки исходного происхождения на фоне на фоне на заднем плане на когни. .
    •   Синтаксис:   
     background-origin: padding-box; 
    •   Пример:   
     HTML 
       
      <   html   > 
      
      <   head   > 
             <   title   >background-origin property  title   > 
        <  Стиль  > 
        .GFG {
        Padding: 40PX; 
                     ширина: 400 пикселей; 
                     background-image: 
                     background-repeat: без повтора; 
                     background-origin: padding-box; 
                     граница: 1 пикс. двойная; 
                     text-align: justify; 
                 } 
               style   > 
        head   > 
      
      <   body   > 
             <   div   класс   =   "GFG"  > 
      
      <  P  >   <  P  > 
        Подготовка к приводе на работу 
       , такие как Microsoft, 
        Amazon, Adobe etc с бесплатным онлайн  9003   Amazon, Adobe Etc с бесплатным онлайн  9003
      Amazon, Adobe etc с бесплатным онлайн  9003
     606060606060606060606060606061060606060606060606060606060606060606060606060606061060606061060606060606.  . Курс 
                   фокусируется на различных вопросах MCQ и кодировании 
                  , которые могут быть заданы на собеседованиях, и 
                   сделайте свой предстоящий сезон трудоустройства 
                   эффективным и успешным. 
                   p   > 
      
      
               div   > 
        body   > 
      
        HTML  > 
    •   Выход: 
      Пограничная бокса:  Это свойство используется для установки изображения на границу корпуса веб-страницы.
    •   Синтаксис:   
     background-origin: border-box; 
    •   Пример:   
     HTML 
       
      <   html   > 
      
      <   head   > 
             <   title   >background-origin property  title   > 
        <  Стиль  > 
        .GFG {
        Padding: 40PX; 
                     ширина: 400 пикселей; 
                     background-image: 
                     background-repeat: без повтора; 
                     background-origin: border-box; 
                     граница: 1 пикс. двойная; 
                     text-align: justify; 
                 } 
               style   > 
        head   > 
      
      <   body   > 
             <   div   класс   =   "GFG"  > 
      
      <  P  >   <  P  > 
        Подготовка к приводе на работу 
       , такие как Microsoft, 
        Amazon, Adobe etc с бесплатным онлайн  9003   Amazon, Adobe Etc с бесплатным онлайн  9003
      Amazon, Adobe etc с бесплатным онлайн  9003
     606060606060606060606060606061060606060606060606060606060606060606060606060606061060606061060606060606.  . Курс 
                   фокусируется на различных вопросах MCQ и кодировании 
                  , которые могут быть заданы на собеседованиях, и сделайте 
                   ваш предстоящий сезон размещения эффективен 
                   и успешно. 
                   p   > 
      
      
               div   > 
        body   > 
      
        html   >    
    •   Вывод:   
      content-box везде, где свойство content является разделением фона в соответствии с происхождением использовал.
    •   Синтаксис:   
     background-origin: content-box; 
    •   Пример: 
     HTML 
       
      <   html   > 
      
      <   head   > 
             <   title   >background-origin property  title   > 
        <  Стиль  > 
        .GFG {
        Padding: 40PX; 
                     ширина: 400 пикселей; 
                     background-image: 
                     background-repeat: без повтора; 
                     background-origin: content-box; 
                     граница: 1 пикс. двойная; 
                     text-align: justify; 
                 } 
               style   > 
        head   > 
      
      <   body   > 
             <   div   класс   =   "GFG"  > 
      
      <  P  >   <  P  > 
        Подготовка к приводе на работу 
       , такие как Microsoft, 
        Amazon, Adobe etc с бесплатным онлайн  9003   Amazon, Adobe Etc с бесплатным онлайн  9003
      Amazon, Adobe etc с бесплатным онлайн  9003
     606060606060606060606060606061060606060606060606060606060606060606060606060606061060606061060606060606.  . Курс 
                   фокусируется на различных вопросах MCQ и кодировании 
                  , которые могут быть заданы на собеседованиях, и сделайте 
                   ваш предстоящий сезон размещения эффективен 
                   и успешно. 
                   p   > 
      
      
               div   > 
        body   > 
      
        html   > 
    •   Вывод:   
     
    •   Синтаксис:   
     background-origin: inherit; 
    •   Пример:   
     HTML 
       
      <   html   > 
      
      <   head   > 
             <   title   >background-origin property  title   > 
        <  Стиль  > 
        . GFG {
        Padding: 40PX; 
                     ширина: 400 пикселей; 
                     background-image: 
                     background-repeat: без повтора; 
                     background-origin: наследовать; 
                     граница: 1 пикс. двойная; 
                     text-align: justify; 
                 } 
               style   > 
        head   > 
      
      <   body   > 
             <   div   Класс   =   "GFG"  > 
      
      <  P  > 
                   Prepare for the Recruitment drive of 
                   product based companies like Microsoft, 
                   Amazon, Adobe etc with a free online 
                   placement preparation course. Курс 
                   фокусируется на различных вопросах MCQ и кодировании 
                  , которые могут быть заданы на собеседованиях, и сделайте 
                   ваш предстоящий сезон размещения эффективен и 
                   успешен. 
                   p   > 
      
      
               div   > 
        body   > 
      
        html   >      
    •   Вывод:   
      Поддерживаемые браузеры CSS:  | Свойство с фоновым оригином  перечислены ниже:
    •  Google Chrome 1
    •  Edge 12
    •  Internet Explorer 9
    •  Firefox 4
    •  Opera 10. 5
    •  Safari 3
     
     Связанные арт
     9008
     
    . clip и свойства background-origin | по ЦЗ
     Когда я изучал эти 2 свойства CSS, я был сбит с толку, так как они оба имеют одинаковый набор значений свойств и их демонстрационный эффект выглядит одинаково. После исследований и исследований, вот как я понял эти два свойства прямо сейчас.
     Во всех приведенных ниже примерах я буду использовать div с пунктирной границей 20px и отступом 15px, с повторением фона. (Оранжевый, зеленый и синий цвета ниже представляют границу, отступы и область содержимого соответственно)
     Элемент div, используемый в приведенных ниже примерах Фоновое изображение, используемое в приведенных ниже примерах0002 Определяет начальную  позицию  фона. (из верхнего левого угла)
    1.   value = border-box 
     Когда мы устанавливаем значение «border-box», фон начинается в верхнем левом углу области границы
     demo of background- origin=border-box
      2. value = padding-box 
     Фон начинается в верхнем левом углу области заполнения
     demo of background-origin=padding-box
      3. value = content-box 
     Фон начинается в верхнем левом углу области содержимого что такое «фоновый клип».
     Различия между двумя свойствами 
     «background-clip» — позволяет определить, в какой  области должен отображаться фон , фон за пределами области будет «обрезаться»
     «background-origin» — определяет  только начальная позиция  фона, у нас нет возможности определить что-либо еще (например, где он заканчивается), используя это свойство самостоятельно на этот раз начнется с «content-box», так как это показывает наиболее очевидный эффект. Мы видим, что фон заполняется только в области содержимого, но не в области заполнения или границы.
     demo of background-clip=content-box
     2. value = padding-box 
     На этот раз фон расширился до области заполнения.
     демонстрация background-clip=padding-box
     3.
     value = border-box
     Фон распространяется на весь div, включая его границы.
     демонстрация background-clip=border-boxCodePen для css background-clip и background-origin demo
     Поняв, что делает каждое свойство, мы можем использовать их независимо или вместе для различных вариантов использования!
     Применение нескольких значений 
     Помимо приведенных выше примеров с одним значением, оба свойства поддерживают задание нескольких значений (разделенных запятой) для определения поведения нескольких фонов.
     В следующих примерах я установил 2 URL-адреса фонового изображения в свойстве background-image.
     Затем в демонстрации «background-clip» я могу определить, что изображение A будет расширено до области блока содержимого; в то время как изображение B может распространяться на область рамки.
     В демо-версии «background-origin» начальная точка фона A и фона B может быть разной. (A начинается с поля содержимого, B начинается с поля рамки)
     CodePen для присвоения нескольких значений фоновому клипу и фоновому происхождению
     Применить 2 свойства вместе 
     2 свойства можно использовать вместе.

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

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