background-clip: область фона

Куда распространяется фон: border-box, padding-box, content-box, text.

Уровень: средний 10 разделов 12 минут

1. Что это и зачем

Куда распространяется фон: border-box, padding-box, content-box, text.

Цвет в CSS задаётся в цветовых моделях: hex, rgb(a), hsl(a) и их нотациях, включая современные oklch. Фон управляется свойством background с десятком подсвойств — от цвета до градиентов и повторения картинки.

{title} — это про контраст, а не про «красоту»: сначала читаемость, потом настроение.

2. Синтаксис и пример

h1 { background-clip: text; -webkit-text-fill-color: transparent; }

Запись выше — базовый вариант использования. Обратите внимание, как background-clip: область фона вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

Градиенты — это фоновые изображения, сгенерированные браузером; их можно накладывать и комбинировать с картинками. Прозрачность достигается альфа-каналом, а не «лёгким» оттенком.

В реальной разметке background-clip: область фона встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

{title} — это про контраст, а не про «красоту»: сначала читаемость, потом настроение.

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

Современная модель цвета (hsl, oklch, color()) поддерживается везде в 2020-х. Старые hex-значения тоже всегда работают, поэтому миграция безопасна.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

clip:text красит буквы градиентом.

Поддержка: используйте префиксы и fallback-цвет.

7. Практическое задание

Сделайте заголовок с градиентной заливкой букв.

Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.

h1 { background-clip: text; -webkit-text-fill-color: transparent; }

8. Как применять в проектах

Палитра заводится в переменные :root и используется во всём интерфейсе; тёмная тема меняет переменные, а не отдельные страницы.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

цвета вынесены в переменные;
контраст текста и фона ≥ 4.5:1 для текста;
состояния (hover/active) различимы по цвету И форме;
градиенты не конфликтуют с тёмной темой;
прозрачность не «серотит» текст;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам