Povedzme, že chcete umiestniť obrázok alebo dva na webovú stránku. Jedným zo spôsobov je použitie vlastnosti background-imageCSS.

Táto vlastnosť použije jeden alebo viac obrázkov na pozadí na prvok, napríklad , ako vysvetľuje dokumentácia. Používajte ho z estetických dôvodov, ako je napríklad pridanie textúrovaného pozadia na vašu webovú stránku.

Pridajte obrázok

Pomocou tejto background-imagevlastnosti je ľahké pridať obrázok . Stačí zadať cestu k obrázku v url()hodnote.

Cesta k obrázku môže byť adresa URL, ako je uvedené v príklade nižšie:

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

Alebo to môže byť miestna cesta. Tu je príklad:

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

Pridajte viac obrázkov

Na background-imagenehnuteľnosť môžete použiť viac obrázkov .

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 veľa kódu. Poďme si to rozobrať.

Každú url()hodnotu obrázka oddeľte čiarkou.

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

Teraz umiestnite a vylepšite svoje obrázky použitím ďalších vlastností.

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

Existuje niekoľko čiastkových vlastností, ktoré môžete pridať k obrázkom na pozadí, ako napríklad background-repeata background-position, ktoré sme použili vo vyššie uvedenom príklade. K obrázku na pozadí môžete dokonca pridať prechody.

Uvidíte, ako to vyzerá, keď dáme všetko dokopy.

Objednajte si veci

Na poradí, v akom sú vaše obrázky uvedené v zozname, záleží na poradí stohovania. To znamená, že prvý uvedený obrázok je podľa dokumentácie najbližšie k používateľovi. Potom ďalší a ďalší a tak ďalej.

Tu je príklad.

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 kóde sme uviedli dva obrázky. Prvý obrázok (morocco-blue.png) bude pred druhým (oriental-tiles.png). Oba obrázky majú rovnakú veľkosť a nie sú priehľadné, takže vidíme iba prvý obrázok.

Ak ale presunieme druhý obrázok (oriental-tiles.png) doprava o 200 pixelov, uvidíte jeho časť (zvyšok zostáva skrytý).

Tu je príklad, ako to vyzerá, keď sme dali všetko dohromady.

Kedy by ste mali použiť obrázok na pozadí?

Táto background-imagenehnuteľnosť sa musí páčiť mnohým . Ale má to nevýhodu.

Obrázok nemusí byť prístupný všetkým používateľom, upozorňuje dokumentácia, napríklad používateľom čítačiek obrazovky.

Je to preto, že do background-imagevlastníctva nemôžete pridať textové informácie . Výsledkom bude, že čitateľom obrazovky bude obraz chýbať.

Použite background-imagevlastnosť, iba ak potrebujete na svojej stránke pridať nejaké dekorácie. V opačnom prípade použite prvok HTML, ak má obrázok význam alebo účel, ako to uvádza poznámka v dokumentácii.

Takto môžete do prvku obrázka pridať text pomocou altatribútu, ktorý obrázok popisuje. Zadaný text vyberú čítačky obrazovky.

Myslite na to takto: background-imageje vlastnosť CSS a CSS sa zameriava na prezentáciu alebo štýl; HTML sa zameriava na sémantiku alebo význam.

Pokiaľ ide o obrázky, máte rôzne možnosti. Ak je na ozdobu potrebný obrázok, potom background-imagemôže byť táto nehnuteľnosť pre vás dobrou voľbou.

Píšem o učení sa programovaní a najlepších spôsoboch, ako na to ( amymhaddad.com).