JS властивість CSSStyleDeclaration.backgroundClip
Загальний опис
backgroundClip є властивістю об'єкта style, що належить до будь-якого HTML-елемента. Ця властивість визначає область, в межах якої відображається фонове зображення або колір елемента. Основна суть backgroundClip полягає в тому, щоб обмежити або розширити область відображення фону, що може бути корисним для створення різноманітних візуальних ефектів та точного налаштування зовнішнього вигляду елементів на веб-сторінці.
Основні сфери застосування backgroundClip включають веб-дизайн та розробку інтерфейсів користувача, де необхідно контролювати вигляд фону відносно меж елемента. Це може бути використано для створення ефектів з закругленими кутами, обмеження фону до меж тексту, або для точного налаштування відображення фонових зображень у складних компонентах.
Використання backgroundClip можна розглянути на кількох прикладах від найпростіших до складніших.
Перший приклад показує, як обмежити фон межами вмісту елемента, використовуючи значення content-box:
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
width: 200px;
height: 100px;
border: 5px solid black;
padding: 20px;
background: lightblue;
}
</style>
</head>
<body>
<div id="myDiv">Це див</div>
<button onclick="setContentBoxClip()">Обмежити фон межами вмісту</button>
<script>
function setContentBoxClip() {
let element = document.getElementById('myDiv');
element.style.backgroundClip = 'content-box';
}
</script>
</body>
</html>
У цьому прикладі, коли користувач натискає кнопку, викликається функція setContentBoxClip, яка встановлює значення backgroundClip на content-box. Це означає, що фон буде обмежений межами вмісту елемента, виключаючи область padding та border.
Далі розглянемо приклад, де фон обмежується межами padding, використовуючи значення padding-box:
let element = document.getElementById('myDiv');
element.style.backgroundClip = 'padding-box';
У цьому випадку, при натисканні на кнопку, викликається функція setPaddingBoxClip, яка встановлює значення backgroundClip на padding-box. Це означає, що фон буде розповсюджуватись до меж padding, виключаючи область border.
Ще один приклад, де фон розповсюджується до меж border, використовуючи значення border-box:
let element = document.getElementById('myDiv');
element.style.backgroundClip = 'border-box';
У цьому прикладі, коли користувач натискає кнопку, викликається функція setBorderBoxClip, яка встановлює значення backgroundClip на border-box. Це означає, що фон буде охоплювати всю область елемента, включаючи border.
Для більш складних ефектів можна поєднувати backgroundClip з іншими властивостями CSS, такими як backgroundImage, borderRadius та backgroundSize. Наприклад, створимо ефект закруглених кутів з обмеженим фоном:
let element = document.getElementById('myDiv');
element.style.backgroundClip = 'border-box';
У цьому прикладі використовується закруглення кутів, і фон обмежується межами border, що створює ефект обмеженого фону з закругленими кутами.
Таким чином, властивість backgroundClip є важливим інструментом для контролю відображення фону в межах елементів на веб-сторінці. Це дозволяє розробникам створювати точні візуальні ефекти, адаптуючи фон відповідно до різних частин елемента, і забезпечує більшу гнучкість у дизайні веб-додатків.
| Порада: | Значення |
| Порада: | Для більш складних ефектів можна використовувати |
| Порада: | Якщо ви використовуєте |
Синтаксис
element.style.backgroundClipЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми демонструємо використання backgroundClip для встановлення області, до якої буде застосовано фонове зображення або колір. Користувач може вибрати значення border-box, padding-box або content-box за допомогою радіо-кнопок.
Коли користувач змінює значення радіо-кнопки, JavaScript-код оновлює властивість backgroundClip для елементів .box та .content. Це дозволяє наочно побачити, як змінюється область застосування фону для кожного значення backgroundClip.
У цьому прикладі ми створюємо елемент div з межею та відступом, а потім встановлюємо фонове зображення та element.style.backgroundClip = 'border-box'. Це означає, що фонове зображення буде поширюватися на всю область елемента, включаючи межі та відступи. Це корисно для створення плиткових фонів або візерунків, які повинні повністю покривати елемент.
<div id="box" style="border: 10px solid #ccc; padding: 20px;">
Вміст елемента
</div>
<script>
const box = document.getElementById('box');
// Встановлюємо фонове зображення та backgroundClip як border-box
box.style.backgroundImage = 'url("pattern.png")';
box.style.backgroundClip = 'border-box';
</script>У цьому прикладі ми створюємо два вкладених елементи div: зовнішній box з градієнтним фоном та внутрішній content з білим фоном. Ми встановлюємо element.style.backgroundClip = 'content-box' для внутрішнього елемента content. Це означає, що білий фон буде обмежений лише областю вмісту елемента content, виключаючи відступи.
Результатом буде ефект внутрішньої рамки, де градієнтний фон box буде видимим через відступи content. Це демонструє більш складне використання backgroundClip для створення цікавих візуальних ефектів.
<div id="box" style="border: 10px solid #ccc; padding: 20px; background: linear-gradient(to right, #ff0000, #0000ff);">
<div id="content" style="background-color: #fff; padding: 20px;">
Вміст елемента
</div>
</div>
<script>
const box = document.getElementById('box');
const content = document.getElementById('content');
// Встановлюємо backgroundClip як content-box для вмісту
content.style.backgroundClip = 'content-box';
</script>