Slika v ozadju CSS - Kako dodati URL slike v svoj razdel

Recimo, da želite na spletno stran postaviti sliko ali dve. Eden od načinov je uporaba background-imagelastnosti CSS.

Ta lastnost uporablja eno ali več slik v ozadju za element, kot je a , kot je razloženo v dokumentaciji. Uporabite ga iz estetskih razlogov, na primer za dodajanje teksturiranega ozadja na svojo spletno stran.

Dodajte sliko

S pomočjo background-imagelastnosti je enostavno dodati sliko . V vrednosti navedite samo pot do slike url().

Pot do slike je lahko URL, kot je prikazano v spodnjem primeru:

div { /* Background pattern from Toptal Subtle Patterns */ background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"); height: 400px; width: 100%; } 

Lahko pa je tudi lokalna pot. Tu je primer:

body { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("./images/oriental-tiles.png"); } 

Dodajte več slik

Na background-imagelastnost lahko uporabite več slik .

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 veliko kode. Razčistimo.

Vsako url()vrednost slike ločite z vejico.

background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); 

Zdaj postavite in izboljšajte svoje slike z uporabo dodatnih lastnosti.

background-repeat: no-repeat, no-repeat; background-position: right, left; 

Slikam v ozadju lahko dodate več podlastnosti, na primer background-repeatin background-position, ki smo jih uporabili v zgornjem primeru. Sliki ozadja lahko celo dodate prelive.

Poglejte, kako je videti, ko vse sestavimo.

Naročila so pomembna

Vrstni red, da svoje slike navedete v zadevah zaradi vrstnega reda zlaganja. To pomeni, da je prva navedena slika uporabniku najbližja v skladu z dokumentacijo. Nato naslednji in naslednji itd.

Tu je primer.

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; } 

V zgornji kodi smo navedli dve sliki. Prva slika (morocco-blue.png) bo pred drugo (oriental-tile.png). Obe sliki sta enake velikosti in nista prozorni, zato vidimo samo prvo sliko.

Če pa drugo sliko (oriental-tile.png) premaknemo desno za 200 slikovnih pik, potem lahko vidite del slike (ostalo ostane skrito).

Evo, kako izgleda, ko vse sestavimo.

Kdaj naj uporabljate sliko v ozadju?

Na background-imagenepremičnini je veliko všeč . Vendar obstaja pomanjkljivost.

V dokumentaciji je poudarjeno, da slika morda ni dostopna vsem uporabnikom, na primer tistim, ki uporabljajo bralnike zaslona.

To je zato, ker background-imagelastnosti ne morete dodati besedilnih informacij . Zaradi tega bodo bralci zaslona pogrešali sliko.

Uporabite background-imagenepremičnine le, ko boste morali dodati nekaj dekoracijo na svojo stran. V nasprotnem primeru uporabite element HTML, če ima slika pomen ali namen, kot je zapisano v dokumentaciji.

Tako lahko elementu slike dodate besedilo z altatributom, ki opisuje sliko. Priloženo besedilo bodo pobrali bralniki zaslona.

Pomislite tako: background-imageje lastnost CSS in CSS se osredotoča na predstavitev ali slog; HTML se osredotoča na semantiko ali pomen.

Ko gre za slike, imate možnosti. Če je za dekoracijo potrebna slika, potem je background-imagenepremičnina morda dobra izbira za vas.

Pišem o učenju programiranja in najboljših načinih za to ( amymhaddad.com).