CSS-i kasutamine taustpildi määramiseks

• Mai 20, 2024

Kas olete kunagi mõelnud, kuidas veebisaidid haldavad neid ilusaid teksti taga hõljuvaid kujundusi ja pilte? Kõik see toimub kaskaadsete stiililehtede võlu kaudu. CSS võimaldab teil mitte ainult oma lehe taustale pildi määrata, vaid võimaldab teil ka näpistada, kuidas pilti kuvatakse - et saaksite just soovitud väljanägemise.

Teie taustpildi põhiline tugiplaat on sobivalt "taustapildi" omadus. Selle omaduse abil saate oma saidile öelda, kus pildifail asub, järgmiselt:

keha {
taustpilt: url ("image.gif");
}

See on kõik, mida peate tegema oma veebilehe taustapildi paigutamiseks. Muidugi soovite tõenäoliselt kohandada pildi kuvamise viisi. Oletame, et soovite, et teie pilt algaks lehe ülaosast, vaid oleks vasakule joondatud (horisontaalse joondamise) asemel horisontaalselt keskel. Sel juhul soovite oma CSS-i reeglile lisada omaduse 'taust-positsioon':

keha {
taustpilt: url ("image.gif");
taust-asukoht: ülaosa keskel;
}

Omaduse „taustaasend” määratlemisel seab esimene väärtus horisontaalse joonduse (vasakul, keskel või paremal) ja teine ​​pildi vertikaalse joonduse (ülemine, keskel või all).

Järgmisena otsustate, et soovite peatada pildi horisontaalselt plaadistamise (kordamise), ehkki soovite, et see klõpsataks vertikaalselt. On aeg välja tuua omadus 'taust korrata':

keha {
taustpilt: url ("image.gif");
taust-asukoht: ülaosa keskel;
taust-korrata: korrata-y;
}

Väärtuse „korrata-y” seadmisel käsitatakse brauseril taustpilt klõpsata y-teljel, ka vertikaalselt, kuid mitte x-teljel (horisontaalselt), mis on täpselt see, mida me tahtsime. Kui soovite seda horisontaalselt, kuid mitte vertikaalselt plaadida, kasutaksite väärtust 'korrata x'; kui te ei soovinud, et pilt üldse klõpsataks, siis andke sellele väärtus "mitte korda". Vaikeväärtus on pildi plaadistamine nii horisontaalselt kui ka vertikaalselt, nii et kui see on teie pildi jaoks parim valik, ei pea te üldse määrama tausta kordama.

Lõpuks saate vaadata atribuuti taust-manus. Vaikimisi kerib teie pilt lehe kerimisel, nii et kui te ei korda pilti vertikaalselt ja kui teil on pikk leht, ei laiene teie pilt lehe alumises servas. Saate seda muuta, seades atribuudi „tausta manus” väärtusele „fikseeritud”, mille tõttu taustpilt jääb monitori samasse kohta sõltumata sellest, kuidas leht kerib. Nüüd näevad teie taustpildi reeglid välja järgmised:

keha {
taustpilt: url ("image.gif");
taust-asukoht: ülaosa keskel;
taust-korrata: korrata-y;
taustkinnitus: fikseeritud;
}


Kui soovite oma CSS-i reegleid hoida võimalikult väikestena, saate kõik taustväärtused ühendada ühe reaga, kasutades atribuuti "taust", näiteks järgmiselt:

taust {
url ("image.gif") korrata-y fikseeritud keskel ülaosas;
}

„Tausta” atribuudi kasutamisel peate väärtused loetlema kindlas järjekorras:
[taustavärv (kui seda kasutatakse)] [taustapilt] [taustakordamine] [taust-manus] [taustaasend]. Võite jätta mis tahes väärtuse, mida te ei vaja, peate lihtsalt loetlema kõik väärtused, mida kasutate õiges järjekorras, vastasel juhul reegel ei tööta.

Video Juhiseid: Programmeerimine (Mai 2024).