CSS je kratica za Cascading Style Sheets. To je preprost, a zmogljiv oblikovalski jezik, ki lahko preoblikuje spletne strani. Preprosto poenostavlja postopek, s pomočjo katerega so spletne strani predstavljive in privlačne za uporabnike . V tem članku bomo razumeli, kako uporabiti različne slike ozadja v CSS v naslednjem vrstnem redu:
- Slika za ozadje v lastnostih CSS
- Slika za ozadje v CSS
- Ponovitev ozadja
- Priloga za ozadje
- Položaj ozadja
- Slika za ozadje v velikosti CSS
- Barva ozadja
Slika za ozadje v lastnostih CSS
Obstaja veliko lastnosti, ki se uporabljajo za nadzor vedenja in pozicioniranja slike. Te lastnosti so:
- slika ozadja
- ozadje-ponovitev
- ozadje-priloga
- položaj ozadja
- velikost ozadja
- Barva ozadja
Seznanili se bomo z vsako od teh lastnosti in videli, kdaj in kako jih uporabiti, z nekaj zanimivimi predstavitvami.
Slika za ozadje v CSS
The slika ozadja lastnost, kot že ime pove, se preprosto uporablja za označevanje in nastavljanje slike ozadja skozi element na spletni strani. Slika ozadja je privzeto postavljena v zgornji levi kot elementa.
sintaksa: background-image: url | none | linearni gradient | radialni gradient
namestite php 7 na Windows
telo {background-image: url ('apple.jpg')}ozadje z uporabo URL-ja
Razumejmo parametre:
- url: Vnos v ta parameter nam omogoča, da določimo pot do datoteke do katere koli slike ali URL do slike, ki jo je treba nastaviti kot ozadje. Če želite razglasiti več slik, so URL-ji ločeni z vejico.
telo {background-image: url ('apple.jpg')} 
- noben: To je privzeta vrednost lastnosti in slika ozadja ni upodobljena, če je navedena njena vrednost.
telo {ozadje: nobena}- linearni gradient (): Slika za ozadje je nastavljena na linearni gradient. Za to lastnost morate določiti najmanj dve barvi, tj. Od zgoraj navzdol.
body {background-color: # 001-background-image: linearni gradient (bela 15%, prozorna 16%), linearni gradient (bela 15%, prozorna 16%) velikost ozadja: 60px 60px položaj ozadja: 0 0 30px 30px}- radialni gradient (): Slika za ozadje je nastavljena na radialni gradient. Za to lastnost morate določiti najmanj dve barvi, tj. Za sredino do robov.
body {background-color: # 001-background-image: radialni preliv (bela 15%, prosojna 16%), radialni preliv (bela 15%, prosojna 16%) velikost ozadja: 60px 60px položaj ozadja: 0 0, 30px 30px}- ponavljajoči se linearni gradient (): Ponavlja linearni gradient. Uporabimo isti primer, ki smo ga videli pri linearnem gradientu za ponavljajoči se linearni gradient in si oglejmo razliko.
body {ozadje-barva: # 001 ozadje-slika: ponavljajoč-linearni preliv (bela 15%, prozorna 16%), ponavljajoča-linearna preliv (bela 15%, prozorna 16%) velikost ozadja: 60px 60px položaj ozadja : 0 0, 30 slikovnih pik 30 slikovnih pik}- repeating-radial-gradient (): Ponavlja radialni gradient. Raziskujmo isti primer, kot smo ga uporabili zgoraj v radialnem gradientu.
body {background-color: # 001 background-image: ponavljajoči se radialni gradient (bela 15%, prozorna 16%), ponavljajoča se radialna preliv (bela 15%, prozorna 16%) velikost ozadja: 60px 60px položaj ozadja : 0 0, 30 slikovnih pik 30 slikovnih pik}Rezervno ozadje
Kot profesionalni nasvet je vedno priporočljivo dodati barvo ozadja kot nadomestno možnost. Reši se še posebej, če se slike ozadja ne naložijo ali gradient ozadja, ki smo ga nastavili med razvojem, nekateri stari brskalniki, v katerih si ga ogledujemo, ne podpirajo.
To ne pokvari uporabniške izkušnje in se lahko razglasi takole:
body {ozadje: url (apple_lost.jpg) roza}Več ozadja
Na voljo imamo tudi možnost nastavitve več slik za ozadje in je v večini primerov potrebna, kot je slika v ospredju in ozadju. Tu je pomemben vrstni red slike, najprej se navede slika, ki mora biti spredaj, nato pa slika, ki mora biti zadnja na zadnji strani.
Spodaj je primer več slik v ozadju:
body {background-image: url ('small-heart.jpg'), url ('background.jpg')}Ponovitev ozadja
Lastnost ponovitve ozadja se uporablja skupaj s sliko ozadja za določanje ponovitve slike. Določa, ali in kako se bo slika v ozadju ponovila. Slika ozadja se privzeto ponovi tako navpično kot vodoravno.
Možne vrednosti so:
- repeat - slika se ponavlja tako vodoravno kot navpično
- no-repeat - slika se ne ponovi
- repeat-x - Slika se ponovi vodoravno
- repeat-y - Slika se ponovi navpično
- presledek - slika se ponovi z enakomernimi presledki ali presledki.
- okrogla - slika se ponovi, da zapolni območje brez razmikov med njimi.
Sintaksa CSS za lastnost background-repeat je:
za kaj se uporablja mongodb
ponovitev ozadja: repeat | repeat-x | repeat-y | no-repeat | presledek | krog
body {background-image: url ('heart.png'), url ('background.png') background-repeat: repeat-y, repeat-x background-color: #ffffff}Priloga za ozadje
The ozadje-priloga lastnost se uporablja skupaj s sliko za ozadje, da določi, ali naj se slika pomika med premikanjem vsebine. Pomeni, da je treba sliko v ozadju popraviti ali pa naj se skupaj z dokumentom pomika glede na pogled okna brskalnika. Privzeta vrednost je pomikanje.
Možne vrednosti so:
- drsenje - slika se pomakne skupaj s stranjo.
- popravljeno - Slika se ne bo pomikala skupaj s stranjo
Sintaksa CSS za prilogo v ozadju je:
priloga v ozadju: pomikanje | fiksno
body {background-image: url ('heart.png'), url ('background.png') background-repeat: space, round}Položaj ozadja
The položaj ozadja lastnost se uporablja za označevanje lokacije ali položaja slike v ozadju. Možne vrednosti so:
- vrh
- prav
- spodaj
- levo
- center
- kombinacija teh vrednosti (npr. levo zgoraj)
Sintaksa CSS za položaj ozadja je:
položaj ozadja: zgoraj | desno | levo | spodaj | sredina
body {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: scroll}Slika za ozadje v velikosti CSS
Ta lastnost je ena najbolj uporabnih, saj nam omogoča nadzor nad velikostjo slike v ozadju. Obstajajo različne kombinacije, ki jih lahko uporabimo s to lastnostjo in v skladu s tem dobimo rezultate. Privzeta vrednost je samodejno.
Za velikost ozadja lahko uporabite naslednje vrednosti:
- samodejno
- dolžina- višina in širina slike, npr. 20px 40px.
- odstotek- višina in širina slike kot odstotek w.r.t nadrejenega elementa, npr. 50% 50%.
- center - poravnajte sliko na sredino
- pokrov, sliko prilagodite tako, da jo v celoti pokrije za območje ozadja.
- vsebujejo, spreminjajte sliko tako, da ustreza njeni dejanski višini in širini.
Sintaksa CSS za položaj ozadja je:
velikost ozadja: vrednost
primer ogrodja testnega okolja za selen
body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: 400px 150px, cover}body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: vsebuje, 400px 150px}Barva ozadja
Ta najpreprostejša od vseh lastnosti v CSS velja. Za ozadje strani uporablja enobarvne barve. Vrednost te lastnosti lahko določite v barvah (npr. Rdeča, modra itd.), Šestnajstiški vrednosti in vrednosti RGB.
Sintaksa CSS za barvo ozadja je:
Barva ozadja: vrednost
body {background-image: url (small-heart.jpg) color-background: # 22a8e3}S tem so zaključene vse lastnosti, ki jih lahko uporabimo v ozadju. Vedno lahko preizkusimo različne kombinacije lastnosti, kot smo videli na našem predstavitvi.
CSS je bistvenega pomena in mora pridobiti spretnosti za vse front-end spletne razvijalce. Pomaga pri oblikovanju in oblikovanju ozadja ter pri ustvarjanju impresivnih spletnih mest in obogatitvi uporabniške izkušnje. Najboljše je, da nadaljujete z eksperimentiranjem in v celoti izkoristite to posebno front-end tehnologijo, saj zna narediti čudeže in dinamično spremeniti stran.
Oglejte si našo ki prihaja z usposabljanjem pod vodstvom inštruktorjev v živo in izkušnjami iz resničnega življenja To usposabljanje vam omogoči, da obvladate veščine za delo z zalednimi in prednjimi spletnimi tehnologijami. Vključuje usposabljanje za spletni razvoj, jQuery, Angular, NodeJS, ExpressJS in MongoDB.
Imate vprašanje za nas? Prosimo, omenite ga v oddelku za komentarje v blogu 'Slika ozadja v CSS', mi pa se vam bomo oglasili.