Kako implementirati pozadinsku sliku u CSS?

Ovaj će vam članak pružiti detaljno i sveobuhvatno znanje o pozadinskim slikama u CSS-u. Gdje ga koristiti i primijeniti isti.

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

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')}

Background-url

  • 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.