Fona klips - CSS-triki

Anonim

background-clip ļauj kontrolēt, cik tālu fona attēls vai krāsa pārsniedz elementa pildījumu vai saturu.

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

Vērtības

  • border-boxir noklusējuma vērtība. Tas ļauj fonam izstiepties līdz elementa apmales ārmalai.
  • padding-box saspiež fonu elementa polsterējuma ārmalā un neļauj tam izstiepties malā.
  • content-boxsagriež fonu satura lodziņa malā.
  • inheritpiemēro background-clipvecāka iestatījumu atlasītajam elementam.

Demonstrācijas

background-clip ir vislabāk izskaidrojams darbībā, tāpēc mēs esam izveidojuši divus demonstrējumus, lai parādītu, kā tas darbojas.

Pirmajā demonstrācijā katram divam ir viens punkts. Rindkopa ir div satura saturs. Katram divam ir dzeltens fons un 5 pikseļu daļēji caurspīdīga gaiši zila apmale.

Skatiet CSS-Tricks pildspalvas fonu pildspalvā (@ css-tricks) vietnē CodePen.

Pēc noklusējuma vai ar background-clip: border-boxiestatījumu dzeltenais fons sniedzas līdz robežas ārmalai. Ievērojiet, kā apmale izskatās zaļa, jo zem tās ir dzeltenais fons.

Mainot background-clipuz padding-box, fona krāsa apstājas vietā, kur beidzas elementa polsterējums. Ievērojiet, ka apmale ir zila, jo fonam nav atļauts asiņot uz robežas.

Ar background-clip: content-boxfona krāsa pati par sevi attiecas tikai uz div saturu, šajā gadījumā uz viena rindkopas elementu. Div's polsterējumam un apmalei nav fona krāsas. Bet ir viena neliela detaļa, kuru ir vērts pieminēt: krāsa sniedzas uz satura rezervi. Pārbaudiet atšķirības starp pirmo un otro piemēru ar content-box.

Pirmajā content-boxpiemērā rindkopai tiek piemērotas pārlūkprogrammas noklusējuma piemales, un fona klipi pēc piemales. Otrajā piemērā piemale CSS ir iestatīta uz 0, un fons tiek apgriezts teksta malā.

Šis nākamais interaktīvais šovs background-clipar fona attēlu. Šīs demonstrācijas saturs ir mazāks tukšs div.

Skatiet Timothy Miller (@tjacobdesign) interaktīvo Pen fona klipa interaktīvo piemēru vietnē CodePen.

Šī demonstrācija attiecas arī background-size: coverun background-repeat: no-repeatpapildus background-clipkontrolēt fona attēlu, kas pretējā gadījumā atkārtot līdz izgriezumu.

Teksts

Tam ir piegādātāja prefiksu versija, kas darbojas, lai izgrieztu fona tekstu. Lai redzētu šo darbu, arī tekstam jābūt caurspīdīgam. Par laimi ir vēl viens piegādātāja prefiksu teksta krāsas īpašums, kas var efektīvi ignorēt color, padarot to drošu lietošanu, jo tam var būt rezerves:

.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 un Safari to atbalsta.

Skatiet
Chris Coyier (@chriscoyier) tekstu Pen Lit ar
CodePen.

Saistīts

  • fona piestiprināšana
  • fona krāsa
  • fona attēls
  • fona izcelsme
  • background-position
  • fona atkārtojums
  • fona lielums

Vairāk resursu

  • background-clip CSS3 spec
  • fona klips pie MDN
  • CSS kastes modelis

Pārlūka atbalsts

Viss skaidrs!

Chrome Safari Firefox Opera IE Android iOS
1+ 3+ 4+ 10,5+ 9+ 4.1+ Darbi