Fono klipas - CSS-gudrybės

Anonim

background-clip leidžia valdyti, kiek fono vaizdas ar spalva tęsiasi už elemento užpildo ar turinio.

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

Vertybės

  • border-boxyra numatytoji reikšmė. Tai leidžia fonui išsiplėsti iki išorinio elemento krašto krašto.
  • padding-box apkarpo foną išoriniame elemento paminkštinimo krašte ir neleidžia jam prasitęsti į kraštinę.
  • content-boxnukirpkite foną turinio langelio pakraštyje.
  • inherittaiko background-cliptėvų nustatymą pasirinktam elementui.

Demonstracijos

background-clip yra geriausiai paaiškinta veikiant, todėl mes sukūrėme dvi demonstracijas, kad parodytume, kaip tai veikia.

Pirmojoje demonstracijoje kiekvieno divo viduje yra viena pastraipa. Pastraipa yra div turinys. Kiekvienas divas turi geltoną foną ir 5 pikselių pusiau permatomą šviesiai mėlyną kraštinę.

Peržiūrėkite „CSS-Tricks“ „Pen“ foninį klipą „CodePen“.

Pagal numatytuosius nustatymus arba su background-clip: border-boxnustatymu geltonas fonas tęsiasi iki išorinio krašto krašto. Atkreipkite dėmesį, kaip kraštinė atrodo žalia, nes geltonas fonas po ja.

Kai background-clipyra pakeistas į padding-box, fono spalva sustoja, kur elementas anketa išklojimui galus. Atkreipkite dėmesį, kad kraštinė yra mėlyna, nes neleidžiama kraujuoti į sieną.

Jei background-clip: content-boxfono spalva taikoma tik div turiniui, šiuo atveju - vieno pastraipos elementui. „Div“ pamušalas ir kraštas neturi fono spalvos. Tačiau verta paminėti vieną smulkmeną: spalva tęsiasi iki turinio paraštės. Patikrinkite pirmojo ir antrojo pavyzdžių skirtumus content-box.

Pirmajame content-boxpavyzdyje pastraipai taikomos numatytosios naršyklės paraštės, o po paraštės - fono klipai. Antrame pavyzdyje paraštė CSS nustatoma kaip 0, o fonas nukerpamas teksto krašte.

Ši kita interaktyvi laida background-clipsu fono vaizdu. Šios demonstracinės versijos turinys yra mažesnis tuščias div.

Žr. Timothy Millerio (@tjacobdesign) interaktyvų „Pen“ klipo interaktyvų pavyzdį „CodePen“.

Ši demonstracija taip pat taikoma background-size: coverir background-repeat: no-repeatbe background-clipkontroliuoti fono paveikslėlį, kuris kitu atveju kartokite tol, kol karpymas.

Tekstas

Yra tiekėjo prefiksų versija, kuri tinka iškirpti foną į tekstą. Norint pamatyti tą darbą, tekstas taip pat turi būti skaidrus. Laimei, yra dar viena pardavėjo prefiksų teksto spalvos ypatybė, kuri gali veiksmingai nepaisyti color, todėl ją naudoti yra saugu, nes tai gali būti atsarginė:

.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“ ir „Safari“ tai palaiko.

Žiūrėkite
Chriso Coyierio (@chriscoyier) „Pen Lit“ tekstą „
CodePen“.

Susijęs

  • prisirišimas prie fono
  • fono spalva
  • fonas-vaizdas
  • fono kilmė
  • fonas-padėtis
  • fonas pakartoti
  • fono dydis

Daugiau išteklių

  • background-clip CSS3 spec
  • fono klipas MDN
  • CSS dėžutės modelis

Naršyklės palaikymas

Viskas aišku!

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
1+ 3+ 4+ 10,5+ 9+ 4.1+ Veikia