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-box
on 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-box
lõikab tausta sisukasti servas.inherit
rakendabbackground-clip
valitud 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-box
komplektiga ulatub kollane taust kuni piiri välisservani. Pange tähele, kuidas piir paistab olevat roheline, kuna selle all on kollane taust.
Kui asendatakse background-clip
vää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-box
taustavä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-box
nä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-clip
koos 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: cover
ja background-repeat: no-repeat
lisaks background-clip
juhtida 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 |