style.backgroundOrigin — точка відліку фону в JavaScript

Загальний опис

backgroundOrigin — це властивість об'єкта style, яка визначає, від якої частини елемента починається фон. Ця властивість встановлює початкову точку для розміщення фонових зображень, і може бути корисною для точного позиціонування фону в межах елемента. Основні значення властивості backgroundOrigin включають padding-box, border-box та content-box, кожне з яких визначає різні межі для відображення фону.

Значення padding-box (використовується за замовчуванням) встановлює початок фону від внутрішнього краю елемента, включаючи область відступу (padding). Це означає, що фон покриває область вмісту та відступів, але не включає границі (border) елемента. Наприклад:

element.style.backgroundOrigin = "padding-box";

Значення border-box включає в себе область відступів та межі елемента. Фон починається від зовнішнього краю межі, що дозволяє фону покривати весь елемент, включаючи його межі:

element.style.backgroundOrigin = "border-box";

Значення content-box обмежує фон лише областю вмісту елемента, виключаючи відступи та межі. Це значення корисно, коли потрібно, щоб фон був присутній лише в області вмісту, не заходячи на відступи чи межі:

element.style.backgroundOrigin = "content-box";

Для кращого розуміння розглянемо приклади використання властивості backgroundOrigin у поєднанні з іншими властивостями, такими як backgroundImage, backgroundSize та backgroundRepeat.

Припустимо, у нас є HTML-елемент з наступним CSS:

<div id="myElement" style="width: 200px; height: 200px; padding: 20px; border: 10px solid black;">
    Це мій елемент
</div>

Для встановлення фону, який починається від внутрішнього краю, використовуйте:

let element = document.getElementById("myElement");
element.style.backgroundImage = "url('background.jpg')";
element.style.backgroundOrigin = "padding-box";

У цьому прикладі фон покриває область вмісту та відступи, але не заходить на межі елемента.

Щоб фон покривав всю область, включаючи межі:

element.style.backgroundImage = "url('background.jpg')";
element.style.backgroundOrigin = "border-box";

Цей код дозволить фону покривати всю область елемента, включаючи відступи та межі.

Якщо потрібно, щоб фон з'являвся лише в області вмісту, виключаючи відступи та межі:

element.style.backgroundImage = "url('background.jpg')";
element.style.backgroundOrigin = "content-box";

Тепер фон буде обмежено лише областю вмісту елемента.

Властивість backgroundOrigin також може використовуватися у поєднанні з іншими властивостями для створення складних візуальних ефектів. Наприклад, налаштування розміру фону та його позиції:

element.style.backgroundImage = "url('background.jpg')";
element.style.backgroundOrigin = "content-box";
element.style.backgroundSize = "cover";
element.style.backgroundPosition = "center";

У цьому випадку фонове зображення буде масштабовано, щоб повністю покрити область вмісту, та вирівняно по центру.

Властивість backgroundOrigin дозволяє точно контролювати розміщення фонів у межах HTML-елементів. Використовуючи різні значення цієї властивості, можна досягти бажаних результатів, від простого розміщення фону до складних ефектів позиціонування та масштабування. Це забезпечує гнучкість та точність у створенні візуально привабливих веб-сторінок.

правити

Порада

Переконайтеся, що значення backgroundOrigin узгоджується з іншими властивостями фону. Наприклад, використання backgroundOrigin разом з backgroundSize та backgroundPosition допоможе точно налаштувати відображення фону:

element.style.backgroundImage = "url('image.jpg')";
element.style.backgroundOrigin = "content-box";
element.style.backgroundSize = "cover";
element.style.backgroundPosition = "center";

автор: Bond правити

Порада

Враховуйте вплив властивостей відступу (padding) та межі (border) на відображення фону. Використання padding-box гарантує, що фон покриє відступи, але не межі, що може бути корисним для створення візуальних ефектів у межах елемента:

element.style.backgroundOrigin = "padding-box";

автор: Bond правити

Порада

Тестуйте фонове зображення на різних розмірах елементів та пристроях. Це дозволить переконатися, що фон відображається коректно та виглядає так, як ви задумали, незалежно від розмірів екрана. Наприклад, для забезпечення адаптивності:

element.style.backgroundOrigin = "border-box";
element.style.backgroundSize = "contain";
element.style.backgroundRepeat = "no-repeat";

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.backgroundOrigin

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	4	3	10.5	12	9

Підтримка: мобільні переглядачі

Переглядач
	4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<div id="myDiv">Деякий текст</div>
<div>
  <label>
    <input type="radio" name="backgroundOrigin" value="border-box" checked>
    border-box
  </label>
  <label>
    <input type="radio" name="backgroundOrigin" value="padding-box">
    padding-box
  </label>
  <label>
    <input type="radio" name="backgroundOrigin" value="content-box">
    content-box
  </label>
</div>

<style>
#myDiv {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 10px solid #ccc;
  background-image: url('pattern.jpg');
  background-repeat: no-repeat;
}
</style>

<script>
const myDiv = document.getElementById('myDiv');
const radioButtons = document.querySelectorAll('input[name="backgroundOrigin"]');

radioButtons.forEach(radio => {
  radio.addEventListener('change', () => {
    if (radio.checked) {
      myDiv.style.backgroundOrigin = radio.value;
    }
  });
});
</script>

<header>
  <h2 class="title">element.style.backgroundOrigin</h2>
  <p class="description">Визначає початкову точку відліку для позиціонування фонового зображення елемента.</p>
</header>
<main>
  <div class="result">
    <div id="box">Деякий текст</div>
    <div class="controls">
      <label>
        <input type="radio" name="backgroundOrigin" value="border-box" checked>
        border-box
      </label>
      <label>
        <input type="radio" name="backgroundOrigin" value="padding-box">
        padding-box
      </label>
      <label>
        <input type="radio" name="backgroundOrigin" value="content-box">
        content-box
      </label>
    </div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 10px solid #ccc;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='200'%20viewBox='0%200%20160%20120'%3E%3Crect%20width='160'%20height='120'%20fill='%23a8dadc'/%3E%3Crect%20y='72'%20width='160'%20height='48'%20fill='%23457b9d'/%3E%3Ccircle%20cx='126'%20cy='26'%20r='14'%20fill='%23f4a261'/%3E%3Cpath%20d='M0%2072%2044%2026%2078%2062%2098%2044%20160%2072Z'%20fill='%232a9d8f'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

const box = document.getElementById('box');
const radioButtons = document.querySelectorAll('input[name="backgroundOrigin"]');

radioButtons.forEach(radio => {
  radio.addEventListener('change', () => {
    if (radio.checked) {
      box.style.backgroundOrigin = radio.value;
    }
  });
});
//# sourceURL=pen.js