Taustalõik - CSS-trikid

Lang L: none (table-of-contents)

background-clip võimaldab teil kontrollida, kui kaugele ulatub taustapilt või -värv elemendi täidisest või sisust kaugemale.

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

Väärtused

  • border-boxon vaikeväärtus. See võimaldab taustal laieneda kuni elemendi piiri välisservani.
  • padding-box klammerdab tausta elemendi polsterduse välisservas ega lase sel piirini ulatuda.
  • content-boxlõikab tausta sisukasti servas.
  • inheritrakendab background-clipvalitud elemendi jaoks vanema seadistuse.

Demod

background-clip on kõige paremini seletatav tegevuses, nii et oleme kokku pannud kaks demot, et näidata selle toimimist.

Esimeses demos on igal div-is sees üks lõik. Lõik on div sisu. Igal divil on kollane taust ja 5-piksline poolläbipaistev helesinine ääris.

Vaadake CodePenis CSS-Tricksi pliiatsi taustklippi (@ css-tricks).

Vaikimisi või koos background-clip: border-boxkomplektiga ulatub kollane taust kuni piiri välisservani. Pange tähele, kuidas piir paistab olevat roheline, kuna selle all on kollane taust.

Kui asendatakse background-clipväärtusega padding-box, peatub taustavärv seal, kus elemendi polsterdus lõpeb. Pange tähele, et piir on sinine, kuna taustal ei ole lubatud verre veritseda.

Kui background-clip: content-boxtaustavärv kehtib ainult div sisu, antud juhul ühe lõigu elemendi kohta. Divi polstril ja äärel pole taustavärvi. Kuid on üks väike detail, mida tasub mainida: värv ulatub sisu veerisse. Vaadake erinevusi esimese ja teise näite vahel content-box.

Esimeses content-boxnäites rakendatakse lõikele brauseri vaikimisi veeriseid ja pärast klõpsu taustalõike. Teises näites määratakse CSS-is veerise väärtuseks 0 ja taust lõigatakse teksti serva.

Järgmine interaktiivne saade background-clipkoos taustpildiga. Selle demo sisu on väiksem tühi div.

Vaadake Timothy Milleri (@tjacobdesign) interaktiivset näpunäidet Pliiats CodePenist.

See demo kehtib ka background-size: coverja background-repeat: no-repeatlisaks background-clipjuhtida Taustakujutise mis muidu korrata kuni lõikamine.

Tekst

Sellel on müüja eesliidetud versioon, mis töötab tausta teksti lõikamiseks. Selle töö nägemiseks peab ka tekst olema läbipaistev. Õnneks on veel üks müüja eesliidetud teksti värvi omadus, mis võib tõhusalt alistada color, muutes selle kasutamise ohutuks, kuna sellel võib olla varukoopia:

.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 ja Safari toetavad seda.

Vaata Pen
Lit teksti Chris Coyier (@chriscoyier)
kohta CodePen.

Seotud

  • taust-kinnitus
  • taustavärv
  • taustapilt
  • taust-päritolu
  • taust-positsioon
  • taust-kordus
  • tausta suurus

Rohkem ressursse

  • background-clip CSS3 spetsifikatsioonis
  • taustklipp MDN-is
  • CSS Boxi mudel

Brauseri tugi

Kõik selge!

Chrome Safari Firefox Ooper IE Android iOS
1+ 3+ 4+ 10,5+ 9+ 4.1+ Töötab

Huvitavad Artiklid...