Оформлення веб-сторінки CSS є важливою частиною розробки, і одним з основних аспектів дизайну є заливка (фон). Заливка може додати візуальний інтерес до вмісту сторінки та допомогти виділити його на фоні.
У CSS є кілька способів створення заливки. Один із найпоширеніших способів – використання властивості background-color. З його допомогою можна встановити колір тла елемента. Наприклад, можна додати фоновий колір до певного елемента, задавши значення властивості background-color у форматі RGB (наприклад, background-color: rgb(255, 0, 0) для червоного кольору).
У CSS також можна використовувати властивість background-image для фонового зображення. Ви можете встановити URL або шлях до зображення як значення цієї властивості. Наприклад, ви можете використовувати background-image: url("image.jpg"), щоб встановити зображення як фон елемента.
Ще одним способом створення заливки є використання лінійного або радіального градієнта як тло. За допомогою властивості background можна створити градієнтне тло, яке може бути горизонтальним, вертикальним або навіть діагональним. Наприклад, ви можете використовувати background: linear-gradient(to right, red, yellow) для створення горизонтального градієнта з червоного до зеленого.
| Метод | Опис |
|---|---|
| background-color | Задає колір тла елемента |
| background-image | Задає зображення як фон елемента |
| background-repeat | Задає повторення фону по горизонталі та вертикалі. |
| background-position | Задає позиціонування фону |
| background-attachment | Задає фіксоване або прокручується позиціонування фону |
| background-size | Вказує розмір фонового зображення |
За допомогою властивості background-color можна встановити колір фону елемента. Задати фоновий колір можна будь-якому елементу – рядковому (inline), блоковому (block) або рядково-блочному (inline-block).
У CSS3 ви можете додавати градієнтний фон до елементів через вже відому властивість background-image . Як значення використовується ключове слово linear-gradient() , де в дужках необхідно вказати стартову точку градієнта, початковий колір та кінцевий колір.
Для створення градієнта фону в HTML можна використовувати CSS властивість background-image . У цьому прикладі створюється градієнт від білого ( #ffffff ) до чорного ( #000000 ) по вертикалі ( to bottom ). Також можна використовувати інші напрямки градієнта, наприклад, to right горизонтального градієнта.