CSS je kratica od Cascading Style Sheets. To je jednostavan, ali moćan jezik dizajna koji ima sposobnost transformiranja web stranica. Jednostavno rečeno, pojednostavljuje postupak izrade web stranica prezentabilnim i privlačnim za korisnike uz pomoć . U ovom ćemo članku razumjeti kako implementirati različite pozadinske slike u CSS sljedećim redoslijedom:
- Pozadinska slika u CSS svojstvima
- Pozadinska slika u CSS-u
- Ponavljanje pozadine
- Prilog pozadine
- Položaj u pozadini
- Pozadinska slika u CSS veličini
- Boja pozadine
Pozadinska slika u CSS svojstvima
Mnogo je svojstava koja se koriste za kontrolu ponašanja i pozicioniranja slike. Ta su svojstva:
- pozadinska slika
- pozadina-ponavljanje
- pozadina-prilog
- pozadinski položaj
- veličina pozadine
- boja pozadine
Upoznat ćemo se sa svakim od ovih svojstava i vidjeti kada i kako ih koristiti uz zanimljive demonstracije.
Pozadinska slika u CSS-u
The pozadinska slika svojstvo kako naziv govori jednostavno se koristi za označavanje i postavljanje pozadinske slike kroz element na web-stranici. Pozadinska slika se prema zadanim postavkama postavlja u gornji lijevi kut elementa.
sintaksa: pozadinska slika: url | nema | linearni gradijent | radijalni gradijent
tijelo {background-image: url ('apple.jpg')}pozadina pomoću url-a
Razumijemo parametre:
- url: Ulaz u ovaj parametar omogućuje nam da odredimo putanju datoteke do bilo koje slike ili URL slike koju treba postaviti kao pozadinu. Da bi se deklariralo više slika, URL-ovi se odvajaju graničnikom zarezom.
tijelo {background-image: url ('apple.jpg')} 
- nijedan: Ovo je zadana vrijednost svojstva i ne prikazuje se pozadinska slika ako je navedena njegova vrijednost.
tijelo {pozadina: nema}- linearni gradijent (): Pozadinska slika postavljena je na linearni gradijent. Za ovo svojstvo potrebne su najmanje dvije boje, tj. Od vrha do dna.
body {background-color: # 001 background-image: linearni gradijent (bijeli 15%, prozirni 16%), linearni gradijent (bijeli 15%, prozirni 16%) veličina pozadine: 60px 60px pozadinski položaj: 0 0, 30 piksela 30 piksela}- radijalni gradijent (): Pozadinska slika postavljena je na radijalni gradijent. Za ovo svojstvo potrebno je navesti najmanje dvije boje, tj. Za središte do rubova.
body {background-color: # 001 background-image: radijalni gradijent (bijeli 15%, prozirni 16%), radijalni gradijent (bijeli 15%, prozirni 16%) veličina pozadine: 60px 60px pozadinski položaj: 0 0, 30 piksela 30 piksela}- ponavljajući-linearni-gradijent (): Ponavlja linearni gradijent. Iskoristimo isti primjer koji smo vidjeli gore u linearnom gradijentu za ponavljajući linearni gradijent i uvidimo razliku.
body {background-color: # 001 background-image: ponavljajući-linearni-gradijent (bijeli 15%, prozirni 16%), ponavljajući-linearni-gradijent (bijeli 15%, prozirni 16%) veličina pozadine: 60px 60px pozadinski položaj : 0 0, 30 piksela i 30 piksela}- ponavljajući-radijalni-gradijent (): Ponavlja radijalni gradijent. Istražimo isti primjer koji smo gore koristili u radijalnom gradijentu.
body {pozadina-boja: # 001 pozadina-slika: ponavljajući-radijalni-gradijent (bijeli 15%, prozirni 16%), ponavljajući-radijalni-gradijent (bijeli 15%, prozirni 16%) veličina pozadine: 60px 60px pozadinski položaj : 0 0, 30 piksela i 30 piksela}Rezervna pozadina
Uvijek je poželjno kao profesionalni savjet dodati boju pozadine kao zamjensku opciju. To dolazi u pomoć pogotovo kad se pozadinske slike ne učitaju ili gradijent pozadine koji smo postavili tijekom razvoja ne podržavaju neki stari preglednici u kojima se pregledava.
ispis_r ()
To ne kvari korisničko iskustvo i može se proglasiti ovako:
body {pozadina: url (apple_lost.jpg) ružičasta}Višestruka pozadina
Također imamo mogućnost postavljanja više pozadinskih slika i ona je u većini slučajeva potrebna poput slike u prvom planu i pozadini. Ovdje je važan redoslijed slike, prvo se deklarira slika koja bi trebala biti sprijeda, a sljedeća bi trebala biti slika koja bi trebala biti straga.
Ispod je primjer za više pozadinskih slika:
tijelo {background-image: url ('small-heart.jpg'), url ('background.jpg')}Ponavljanje pozadine
Svojstvo background-repeat koristi se zajedno s background-image za definiranje ponašanja slike u ponavljanju. Određuje hoće li se i kako ponoviti pozadinska slika. Pozadinska slika se prema zadanim postavkama ponavlja i okomito i vodoravno.
Moguće vrijednosti su:
- repeat - Slika se ponavlja i vodoravno i okomito
- no-repeat - slika se ne ponavlja
- repeat-x - Slika se ponavlja vodoravno
- repeat-y - Slika se ponavlja okomito
- razmak - Slika se ponavlja s jednakim razmacima ili prazninama između.
- okrugli - Slika se ponavlja kako bi popunila područje bez ikakvih praznina između njih.
Sintaksa CSS za svojstvo background-repeat je:
pozadinsko ponavljanje: repeat | repeat-x | repeat-y | no-repeat | razmak | okrugli
body {background-image: url ('heart.png'), url ('background.png') background-repeat: repeat-y, repeat-x background-color: #ffffff}Prilog pozadine
The pozadina-prilog svojstvo se koristi zajedno s pozadinskom slikom da bi se izjavilo treba li se slika pomicati dok se sadržaj pomiče. To znači da bi pozadinska slika trebala biti fiksna ili bi se trebala pomicati zajedno s dokumentom u odnosu na prikaz prozora preglednika. Zadana vrijednost je pomicanje.
Moguće vrijednosti su:
- pomicanje - slika se pomiče zajedno sa stranicom.
- fiksno - slika se neće pomicati zajedno sa stranicom
Sintaksa CSS-a za privitak u pozadini je:
pozadina-privitak: pomicanje | fiksno
body {background-image: url ('heart.png'), url ('background.png') background-repeat: space, round}Položaj u pozadini
The pozadinski položaj svojstvo se koristi za označavanje mjesta ili položaja pozadinske slike. Moguće vrijednosti su:
- vrh
- pravo
- dno
- lijevo
- centar
- kombinacija ovih vrijednosti (npr. lijevo gore)
Sintaksa CSS-a za pozadinsku poziciju je:
pozadinski položaj: gore | desno | lijevo | dolje | sredina
tijelo {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: scroll}Pozadinska slika u CSS veličini
Ovo je svojstvo jedno od najkorisnijih jer nam omogućuje kontrolu veličine pozadinske slike. Postoje različite kombinacije koje možemo upotrijebiti s ovom nekretninom i u skladu s tim dobiti rezultate. Zadana vrijednost je auto.
Sljedeće vrijednosti mogu se koristiti s veličinom pozadine:
- auto
- duljina- visina i širina slike npr. 20 piksela 40 piksela.
- postotna visina i širina slike kao postotak bez roditeljskog elementa, na pr. 50% 50%.
- sredina - poravnajte sliku u sredinu
- pokrov, skalirajući sliku tako da je u potpunosti prekriva područje pozadine.
- sadrže, skalirajući sliku tako da stane do stvarne visine i širine.
Sintaksa CSS-a za pozadinsku poziciju je:
veličina pozadine: vrijednost
tijelo {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: 400px 150px, cover}def __init __ (samo):
tijelo {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: sadrže, 400px 150px}Boja pozadine
Primjenjuje se ovo najjednostavnije od svih svojstava u CSS-u. Primjenjuje pune boje na pozadinu stranice. Vrijednost za ovo svojstvo može se odrediti u bojama (npr. Crvena, plava, itd.), Hex vrijednosti i RGB vrijednosti.
Sintaksa CSS-a za pozadinsku boju je:
boja pozadine: vrijednost
tijelo {background-image: url (small-heart.jpg) background-color: # 22a8e3}Ovime su zaključena sva svojstva koja možemo koristiti u pozadini. Uvijek možemo isprobati različite kombinacije svojstava kao što smo vidjeli u našoj demonstraciji.
CSS je neophodan i mora steći vještine za sve web programere s prednjim dijelom. Pomaže pri dizajniranju i oblikovanju pozadine te stvaranju impresivnih web stranica i obogaćivanju korisničkog iskustva. Najbolje je nastaviti eksperimentirati i u potpunosti iskoristiti ovu posebnu front-end tehnologiju jer može učiniti čuda i dinamički transformirati stranicu.
Pogledajte naš koja dolazi s treningom uživo pod vodstvom instruktora i iskustvom u stvarnom životu. Ovaj trening čini vas vještima za rad s back-end i front-end web tehnologijama. Uključuje obuku o web razvoju, jQueryju, Angularu, NodeJS, ExpressJS i MongoDB.
Imate pitanje za nas? Molimo vas da ga spominjete u odjeljku za komentare bloga 'Pozadinska slika u CSS-u', a mi ćemo vam se javiti.