JS властивість CSSStyleDeclaration.backgroundOrigin
Загальний опис
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-елементів. Використовуючи різні значення цієї властивості, можна досягти бажаних результатів, від простого розміщення фону до складних ефектів позиціонування та масштабування. Це забезпечує гнучкість та точність у створенні візуально привабливих веб-сторінок.
| Порада: | Переконайтеся, що значення |
| Порада: | Враховуйте вплив властивостей відступу ( |
| Порада: | Тестуйте фонове зображення на різних розмірах елементів та пристроях. Це дозволить переконатися, що фон відображається коректно та виглядає так, як ви задумали, незалежно від розмірів екрана. Наприклад, для забезпечення адаптивності: |
Синтаксис
element.style.backgroundOriginЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми демонструємо використання властивості backgroundOrigin для зміни початкової точки відліку для позиціонування фонового зображення елемента div з id="box". Користувач може вибрати одне із трьох значень (border-box, padding-box або content-box) за допомогою радіо-кнопок, і фонове зображення буде позиціонуватися відповідно до вибраного значення. Зверніть увагу на використання querySelectorAll для отримання всіх радіо-кнопок та addEventListener для додавання обробника події change до кожної радіо-кнопки.
У цьому прикладі ми створюємо функцію, яка змінює значення backgroundOrigin для елемента div залежно від вибраного користувачем значення. Це дозволяє наочно побачити вплив різних значень backgroundOrigin на розміщення фонового зображення. Зверніть увагу на використання forEach для додавання обробників подій до кожної радіо-кнопки.
<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>