CSS on lühend kaskaadstiililehtedest. See on lihtne, kuid võimas kujunduskeel, millel on võimalus veebilehti teisendada. Lihtsamalt öeldes lihtsustab see veebilehtede esitatavuse ja kasutajate jaoks atraktiivseks muutmise protsessi . Selles artiklis mõistame, kuidas CSS-is erinevaid taustpilte rakendada järgmises järjekorras:
kuidas lingitud loendit rakendada punktis c
- Taustapilt CSS-i atribuutides
- Taustapilt CSS-is
- Korrake tausta
- Taust manus
- Taustasend
- Taustapilt CSS-suuruses
- Taustavärv
Taustapilt CSS-i atribuutides
Pildi käitumise ja positsiooni kontrollimiseks kasutatakse palju omadusi. Need omadused on:
- taustapilt
- taust-kordus
- taust-kinnitus
- taust-positsioon
- tausta suurus
- taustavärv
Tutvume kõigi nende omadustega ja vaatame, millal ja kuidas neid mõne huvitava tutvustuse abil kasutada.
Taustapilt CSS-is
The taustapilt atribuuti, nagu nimigi ütleb, kasutatakse lihtsalt taustpildi tähistamiseks ja seadistamiseks veebilehe elemendi kaudu. Vaikimisi asetatakse taustapilt elemendi vasakusse ülanurka.
süntaks: taustapilt: url | puudub | lineaarne gradient | radiaalne gradient
body {background-image: url ('apple.jpg')}taust, kasutades URL-i
Mõistame parameetreid:
- URL: Selle parameetri sisend võimaldab meil määrata kas pildi failiraja või pildi URL-i, mis tuleb taustaks määrata. Rohkem kui ühe pildi deklareerimiseks eraldatakse URL-id komaeraldajaga.
body {background-image: url ('apple.jpg')} 
- ükski: See on atribuudi vaikeväärtus ja selle väärtuse määramisel taustapilti ei renderdata.
body {background: none}- lineaarne gradient (): Taustpilt seatakse lineaarsele gradiendile. Selle omaduse jaoks, st ülalt alla, on vaja määrata vähemalt kaks värvi.
keha {taustavärv: # 001 taustapilt: lineaarne gradient (valge 15%, läbipaistev 16%), lineaarne gradient (valge 15%, läbipaistev 16%) tausta suurus: 60 pikslit 60 pikslit taustapositsioon: 0 0, 30 pikslit 30 pikslit}- radiaalgradient (): Taustpilt on seatud radiaalsele gradientile. Selle omaduse jaoks, st keskelt servadele, tuleb määrata vähemalt kaks värvi.
keha {taustavärv: # 001 taustapilt: radiaalgradient (valge 15%, läbipaistev 16%), radiaalgradient (valge 15%, läbipaistev 16%) tausta suurus: 60px 60px taustapositsioon: 0 0, 30 pikslit 30 pikslit}- korduv-lineaarne gradient (): See kordab lineaarset gradienti. Kasutagem korduvat-lineaarset-gradienti sama näidet, mida nägime ülalpool lineaarses gradiendis ja nägime erinevust.
body {background-color: # 001 background-image: korduv-lineaarne gradient (valge 15%, läbipaistev 16%), korduv-lineaarne gradient (valge 15%, läbipaistev 16%) tausta suurus: 60px 60px taustasend : 0 0, 30 pikslit 30 pikslit}- korduv radiaalgradient (): See kordab radiaalset gradienti. Uurigem sama näidet, mida kasutasime radiaalses gradiendis.
keha {taustavärv: # 001 taustapilt: korduv radiaalne gradient (valge 15%, läbipaistev 16%), korduv radiaalne gradient (valge 15%, läbipaistev 16%) tausta suurus: 60 pikslit 60 pikslit taustapositsioon : 0 0, 30 pikslit 30 pikslit}Varuvariant
Professionaalse vihjena on alati soovitatav lisada varuvariandina taustavärv. See tuleb päästmiseks eriti siis, kui kas taustapilte ei laadita või meie poolt seatud gradienttausta ei toeta mõned vanad brauserid, millel seda vaadatakse.
See ei riku kasutuskogemust ja seda saab kuulutada järgmiselt:
body {background: url (apple_lost.jpg) roosa}Mitu tausta
Meil on ka võimalus määrata mitu taustapilti ja see on enamikul juhtudel vajalik, näiteks esiplaan ja taustpilt. Siinkohal on oluline pildi järjekord, esimesena deklareeritakse pilt, mis peaks olema esiküljel, järgmisena deklareerima pilt, mis peaks olema tagumine.
Allpool on näide mitme taustpildi kohta:
keha {taustapilt: url ('väike süda.jpg'), url ('taust.jpg')}müügijõu teenuse pilveintervjuu küsimused
Korrake tausta
Atribuuti taust-kordus kasutatakse koos taustpildiga pildi korduskäitumise määratlemiseks. See täpsustab, kas ja kuidas taustpilti korratakse. Vaikimisi korratakse taustapilti nii vertikaalselt kui ka horisontaalselt.
Võimalikud väärtused on:
- kordus - pilt kordub nii horisontaalselt kui ka vertikaalselt
- ei kordu - pilti ei korrata
- kordus-x - pilti korratakse horisontaalselt
- kordus-y - pilti korratakse vertikaalselt
- tühik- pilti korratakse ühtlaste tühikute või tühikutega.
- ümmargune - pilti korratakse ala täitmiseks ilma nendevaheliste tühikuteta.
Atribuudi background-repeat CSS-i süntaks on järgmine:
taust-kordus: kordus | kordus-x | kordus-y | ei kordu | tühik | ümmargune
body {background-image: url ('heart.png'), url ('background.png') background-repeat: kordus-y, kordus-x taustavärv: #ffffff}Taust manus
The taust-kinnitus atribuuti kasutatakse koos taustpildiga, et öelda, kas pilt peaks sisu kerimise ajal kerima või mitte. See tähendab, et taustapilt peaks olema fikseeritud või see peaks kerima dokumendiga brauseriakna vaate suhtes. Vaikeväärtus on kerimine.
Võimalikud väärtused on:
- kerimine - pilt kerib koos lehega.
- parandatud - pilt ei keri koos lehega
Tausta manuse CSS-i süntaks on järgmine:
tausta manus: kerimine | fikseeritud
body {background-image: url ('heart.png'), url ('background.png') background-repeat: tühik, ümmargune}Taustasend
The taust-positsioon omadust kasutatakse taustpildi asukoha või positsioneerimise tähistamiseks. Võimalikud väärtused on:
- üles
- eks
- alt
- vasakule
- Keskus
- nende väärtuste kombinatsioon (nt vasakul ülaservas)
Taustpositsiooni CSS-i süntaks on:
taustasend: üleval | paremal | vasakul | all | keskel
body {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: kerige}Taustapilt CSS-suuruses
See omadus on üks kõige kasulikumaid, kuna see võimaldab meil taustpildi suurust kontrollida. Selle omadusega saame kasutada erinevaid kombinatsioone ja vastavalt sellele tulemusi saada. Vaikeväärtus on auto.
Tausta suurusega saab kasutada järgmisi väärtusi:
- automaatne
- pildi pikkus - kõrgus ja laius, nt. 20px 40px.
- protsent- pildi kõrgus ja laius vanemelemendi protsendina w.r.t nt. 50% 50%.
- keskel - joondage pilt keskele
- kaanega, suurendades pilti nii, et see oleks täielikult kaetud ala abil.
- sisaldab, suurendades pilti nii, et see sobiks selle tegeliku kõrguse ja laiuseni.
Taustpositsiooni CSS-i süntaks on:
tausta suurus: väärtus
body {background-image: url ('heart.png'), url ('background.png') background-repeat: ei-kordu, korrake tausta-suurust: 400 pikslit 150 pikslit, kate}body {background-image: url ('heart.png'), url ('background.png') background-repeat: ei-kordu, korrake tausta-suurust: sisaldavad, 400 pikslit 150 pikslit}Taustavärv
See kehtib CSS-i kõigi omaduste kohta kõige lihtsam. See rakendab lehe taustale ühevärvilisi värve. Selle atribuudi väärtuse saab määrata värvide (nt punane, sinine jne), kuusnurga ja RGB väärtusena.
Taustavärvi CSS-i süntaks on:
taustavärv: väärtus
teenuse piletite tööriista õpetus
body {background-image: url (small-heart.jpg) background-color: # 22a8e3}See lõpetab kõik omadused, mida saame taustaga kasutada. Me võime alati proovida erinevaid omaduste kombinatsioone, nagu nägime oma demonstratsioonil.
CSS on hädavajalik ja see peab omandama oskused kõigile esiotsa veebiarendajatele. See aitab tausta kujundamisel ja kujundamisel ning muljetavaldavate veebisaitide loomisel ja kasutajakogemuse rikastamisel. Parim on jätkata eksperimenteerimist ja kasutada seda spetsiaalset esiosa tehnoloogiat täielikult ära, kuna see võib teha imesid ja lehte dünaamiliselt muuta.
Vaadake meie mis on varustatud juhendajate juhitud elava koolituse ja reaalse elu projektikogemusega. See koolitus võimaldab teil omandada oskusi, mis võimaldavad töötada tagumise ja esiotsa veebitehnoloogiatega. See sisaldab koolitust veebiarenduse, jQuery, Angular, NodeJS, ExpressJS ja MongoDB kohta.
Kas teil on meile küsimus? Palun mainige seda blogi “Taustpildi CSS-is” kommentaaride osas ja me võtame teiega ühendust.