Фоновий кліп - CSS-хитрощі

Anonim

background-clip дозволяє контролювати, наскільки фонове зображення або колір виходить за рамки заповнення або вмісту елемента.

.frame ( background-clip: padding-box; )

Цінності

  • border-box- значення за замовчуванням. Це дозволяє тлу поширюватися аж до зовнішнього краю межі елемента.
  • padding-box відсікає фон із зовнішнього краю заповнення елемента і не дозволяє йому проникати в межу.
  • content-boxвідсікає фон на краю вікна вмісту.
  • inheritзастосовує background-clipпараметр батьківського елемента до вибраного елемента.

Демо-версії

background-clip це найкраще пояснити в дії, тому ми зібрали дві демонстрації, щоб продемонструвати, як це працює.

У першій демонстрації кожен div містить один абзац. Абзац - це вміст div. Кожен div має жовтий фон і 5-піксельну напівпрозору світло-блакитну рамку.

Дивіться фоновий кліп пера від CSS-Tricks (@ css-tricks) на CodePen.

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

Коли значення background-clipзмінено на padding-box, колір фону зупиняється там, де закінчується відступ елемента. Зверніть увагу на те, що межа має синій колір, оскільки тлу заборонено просочуватися в рамку.

З background-clip: content-box, колір фону застосовується лише до вмісту div, в даному випадку елемента одного абзацу. Оббивка та рамка div не мають кольору фону. Але є одна маленька деталь, на яку варто згадати: колір дійсно поширюється на поля вмісту. Перевірте відмінності між першим і другим прикладами за допомогою content-box.

У першому content-boxприкладі до абзацу застосовуються стандартні поля браузера, а після поля фонові кліпи. У другому прикладі в CSS для поля встановлено значення 0, а фон обрізаний на краю тексту.

Це наступне інтерактивне шоу background-clipз фоновим зображенням. Вміст у цій демонстрації - це менший порожній div.

Дивіться інтерактивний приклад фонового кліпу Pen від Тімоті Міллера (@tjacobdesign) на CodePen.

Це демо також відноситься background-size: coverі background-repeat: no-repeatна додаток до background-clipконтролювати фонове зображення, яке в іншому випадку не повторити б до кліппінга.

Текст

Існує версія з префіксом постачальника, яка працює для відсікання фону до тексту. Щоб побачити цю роботу, текст також повинен бути прозорим. На щастя, існує ще одна властивість кольору тексту з префіксом постачальника, яка може ефективно замінити color, роблячи його безпечним у використанні, оскільки воно може мати резервний варіант:

.background-clip-text ( /* if we can clip, do it */ -webkit-text-fill-color: transparent; -webkit-background-clip: text; /* what will show through the text ~ or ~ what will be the background of that element */ background: whatever; /* fallback text color ~ or ~ the actual color of text, so it better work on the background */ color: red; )

Firefox, Chrome та Safari підтримують це.

Див.
Текст Pen Lit від Chris Coyier (@chriscoyier)
на CodePen.

Пов’язані

  • фон-вкладення
  • Колір фону
  • фонове зображення
  • фон-походження
  • фонове положення
  • фоновий повтор
  • розмір фону

Більше ресурсів

  • background-clip у специфікації CSS3
  • фоновий кліп у MDN
  • Модель CSS Box

Підтримка браузера

Все чисто!

Chrome Сафарі Firefox Опера IE Android iOS
1+ 3+ 4+ 10,5+ 9+ 4.1+ Працює