CSS-model škatle je razložen s primeri.

Danes bom razložil model škatle s pomočjo CSS background-clip in lastnosti izvornega ozadja. Katere so lastnosti posnetka ozadja in izvora ozadja? Za kaj se uporabljajo in kakšna je razlika med njimi?

To je vprašanje, ki bdi od začetnika do srednje ravni spletnih razvijalcev. Nekateri so z njim nekoliko seznanjeni, drugi pa se še vedno sprašujejo, kje lahko uporabljajo te 2 lastnosti.

Preden lahko razumete dve lastnosti, morate razumeti model CSS box. Torej, začnimo s tem.

Najprej ustvarite "div" in vanj vstavite oznako "p",

nekaj vsebine tukaj ...

in mu nato dodajte nekaj slogov.

div {
 ozadje: # 666;
 širina: 300px;
 višina: 250px;
}
p {
 širina: 200px;
 ozadje: rdeča;
}

Kot lahko vidite, da elementu „div“ nismo dali nobenih oblazinjenj ali obrobov, tako da element „div“ še nima polja ali obrobja, celo polje pa velja za polje z vsebino.

Kot je prikazano na spodnji sliki.

Preverite lahko tako, da odprete orodje za razvijalce za krom

Zdaj dajte "div" nekaj oblog v velikosti 50 slikovnih pik od zgoraj, spodaj, levo, desno.

div {
 ozadje: # 666;
 širina: 300px;
 višina: 250px;
 oblazinjenje: 50px; // oblazinjenje od zgoraj, spodaj, levo, desno
}

Zdaj imamo škatlo za oblazinjenje v velikosti 50 slikovnih pik in polje z vsebino je znotraj oblazinjenega polja, kot je prikazano na spodnji sliki.

Zdaj imamo končno oblazinjenje 50px

Zdaj odstranimo širino iz elementa "p", tako da se razširi tako, da sprejme celotno širino polja z vsebino.

p {
 ozadje: rdeče;
}

Rezultat lahko vidite na spodnji sliki.

Element P se razširi tako, da prevzame celotno širino polja z vsebino

Recimo, da dodate sliko v ozadju v „div“ in nastavite njeno velikost ozadja na „vsebuje“, da prilagodite svojo velikost znotraj polja in ji daste tudi nekaj obroba, ker brez obroba ni meja.

div {
 ozadje: # 666 URL ('https://bit.ly/2gzkSPX') brez ponovitve;
 velikost ozadja: vsebuje;
 obroba: 10px trdna črna;
 širina: 300px;
 višina: 250px;
 oblazinjenje: 50px;
}

Potem bo videti tako, kot je prikazano na spodnji sliki.

To lahko preverite tudi tako, da vnesete v orodje za razvijalce za krom in premaknete kazalec nad modelom, kot je prikazano na sliki

Izvor div-jevega ozadja je privzeto nastavljen na polje z oblazinjenimi polji, kar pomeni, da se bo slika začela iz okvirja in bo vidna tudi v vsebinskem polju, ker je vsebinsko polje znotraj oblazinjenega polja.

poreklo v ozadju: škatla za oblazinjenje; /* privzeta vrednost */

Recimo, da želimo, da se slika začne iz polja z oblazinjenjem, vendar hočemo samo razkriti tisti del slike, ki je znotraj vsebinskega polja, nato pa moramo v okvir vsebine nastaviti divji posnetek ozadja.

div {
 ozadje: # 666 URL ('https://bit.ly/2gzkSPX') brez ponovitve;
 velikost ozadja: vsebuje;
 posnetek ozadja: polje z vsebino;
 obroba: 10px trdna črna;
 širina: 300px;
 višina: 250px;
 oblazinjenje: 50px;
}

Rezultate lahko vidite na spodnji sliki, da je viden samo tisti del slike, ki je znotraj vsebinskega polja, slika pa se začne iz polja z oblazinjenjem, ker je to privzeta vrednost "ozadja-orgin".

Kot lahko vidite, da je viden le tisti del slike, ki je znotraj vsebinskega polja, ostalo pa je skrito

Zdaj pa razkrijemo tudi del slike ozadja, ki se nahaja znotraj oblazinjenega polja, za to pa moramo vrvico posnetka v ozadju vrniti v polje z oblazinjenjem, kar je bila privzeta vrednost, preden smo jo spremenili.

div {
 ozadje: # 666 URL ('https://bit.ly/2gzkSPX') brez ponovitve;
 velikost ozadja: vsebuje;
 posnetek za ozadje: škatla za oblazinjenje;
 obroba: 10px trdna črna;
 širina: 300px;
 višina: 250px;
 oblazinjenje: 50px;
}

V rezultatih spodaj lahko vidite, da je zdaj del slike, ki se nahaja znotraj oblazinjenega polja, viden tudi zato, ker smo ozadje za ozadje postavili nazaj v polje za oblazinjenje.

Zdaj lahko vidimo tudi del slike, ki je znotraj polnilnega polja

Zdaj pa se prepričajmo, da se podoba našega diva začne s okvirjem, zato moramo svojemu "divu" dati izvorno polje meje. Najprej povečamo velikost obrobe, da opazimo razliko.

div {
 ozadje: # 666 URL ('https://bit.ly/2gzkSPX') brez ponovitve;
 velikost ozadja: vsebuje;
 izvor ozadja: meja;
 posnetek za ozadje: škatla za oblazinjenje;
 obroba: 20px trda črna; / * Širina obroba je zdaj 20 px * /
 širina: 300px;
 višina: 250px;
 oblazinjenje: 50px;
}

Kot lahko vidite na spodnji sliki, ker se slika v ozadju začenja od okvirja, zato je majhen del slike pokrit s črno obrobo, z drugimi besedami, del slike je za črno obrobo.

Zdaj se slika začenja od okvirja

Zdaj, da dokažem svoje stališče, da se slika začne od robnega polja in zato majhen del slike stoji za črno obrobo, dajmo obrobju nekaj motnosti, da lahko zbledi in vidimo del slike, ki je za mejo.

div {
 ozadje: # 666 URL ('https://bit.ly/2gzkSPX') brez ponovitve;
 velikost ozadja: vsebuje;
 izvor ozadja: meja;
 posnetek za ozadje: škatla za oblazinjenje;
 meja: 20px trdna rgba (0,0,0,0,5); / * z uporabo rgba () * /
 širina: 300px;
 višina: 250px;
 oblazinjenje: 50px;
}
Tu lahko vidite sliko za mejo

Tukaj lahko zdaj vidite del slike, ki je za mejo, kar tudi dokazuje, da se slika začne od meje, ker smo v ozadju postavili izvorno polje.

Zdaj, ko poznate razliko med izvornim ozadjem in posnetkom ozadja in veste tudi za model CSS box, je čas, da z njim ustvarite nekaj neverjetnih stvari. #Goodluck

Če ste zamudili moj prejšnji članek o spletni dostopnosti, potem je tu povezava do njega, ne pozabite ga prebrati. KLIKNI TUKAJ