Recimo da želite staviti sliku ili dvije na web stranicu. Jedan od načina je korištenje background-imagesvojstva CSS.
Ovo svojstvo primjenjuje jednu ili više pozadinskih slika na element, poput a , kako objašnjava dokumentacija. Koristite ga iz estetskih razloga, poput dodavanja teksturirane pozadine web stranici.
Dodajte sliku
Jednostavno je dodati sliku pomoću background-imagesvojstva. Samo navedite put do slike u url()vrijednosti.
Put slike može biti URL, kao što je prikazano u primjeru u nastavku:
div { /* Background pattern from Toptal Subtle Patterns */ background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"); height: 400px; width: 100%; } Ili to može biti lokalni put. Evo primjera:
body { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("./images/oriental-tiles.png"); } Dodajte više slika
Na background-imagesvojstvo možete primijeniti više slika .
div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; background-position: right, left; } To je puno koda. Razdvojimo to.
Svaku url()vrijednost slike odvojite zarezom.
background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); Sada postavite i poboljšajte svoje slike primjenom dodatnih svojstava.
background-repeat: no-repeat, no-repeat; background-position: right, left; Nekoliko je svojstava koja možete dodati pozadinskim slikama, poput background-repeati background-position, koje smo koristili u gornjem primjeru. Možete čak dodati i gradijente na pozadinsku sliku.
Pogledajte kako to izgleda kad sve složimo.
Pitanja reda
Redoslijed navođenja vaših slika bitan je zbog redoslijeda slaganja. To znači da je prva navedena slika najbliža korisniku, prema dokumentaciji. Zatim, sljedeći, i sljedeći, i tako dalje.
Evo primjera.
div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; } U gornjem kodu naveli smo dvije slike. Prva slika (morocco-blue.png) bit će ispred druge (oriental-pločice.png). Obje su slike iste veličine i nedostaje im neprozirnosti, pa vidimo samo prvu sliku.
Ali ako drugu sliku (oriental-pločice.png) pomaknemo udesno za 200 piksela, tada možete vidjeti dio slike (ostatak ostaje skriven).
Evo kako to izgleda kad sve spojimo.
Kada trebate koristiti pozadinsku sliku?
Na background-imageimanju se može puno toga voljeti . Ali postoji nedostatak.
Slika možda neće biti dostupna svim korisnicima, ističe se u dokumentaciji, poput onih koji koriste čitače zaslona.
To je zato što ne možete dodati tekstualne podatke u background-imagesvojstvo. Kao rezultat toga, čitači zaslona će propustiti sliku.
Koristite background-imagesvojstvo samo kada trebate dodati ukras na svoju stranicu. U suprotnom, koristite HTML
Na taj način elementu slike možete dodati tekst pomoću altatributa koji opisuje sliku. Navedeni će tekst preuzeti čitači zaslona.
Razmislite o tome na sljedeći način: background-imageCSS je svojstvo, a CSS se fokusira na prezentaciju ili stil; HTML se fokusira na semantiku ili značenje.
Što se tiče slika, imate mogućnosti. Ako je slika potrebna za ukrašavanje, tada je background-imageimanje možda dobar izbor za vas.
Pišem o učenju programiranja i najboljim načinima za to ( amymhaddad.com).