Фонов клип - 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-boxset жълтият фон се простира чак до външния ръб на границата. Забележете как границата изглежда като зелена заради жълтия фон под нея.

Когато background-clipсе промени на padding-box, цветът на фона спира там, където завършва подложката на елемента. Забележете, че границата е синя, защото на фона не е позволено да прониква в рамката.

С background-clip: content-box, цветът на фона се прилага само към съдържанието на div, в този случай елемента с единичен абзац. Подложката и рамката на div нямат цвят на фона. Но има една малка подробност, която си струва да се спомене: цветът се простира в полето на съдържанието. Проверете разликите между първия и втория пример с content-box.

В първия content-boxпример полетата по подразбиране на браузъра се прилагат към абзаца и фоновите клипове след полето. Във втория пример полето е зададено на 0 в CSS, а фонът е изрязан в края на текста.

Това следващо интерактивно шоу 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+ Върши работа