Obrázok na pozadí CSS - Ako pridať adresu URL obrázka do súboru Div
Povedzme, že chcete umiestniť obrázok alebo dva na webovú stránku. Jedným zo spôsobov je použitie vlastnosti background-image
CSS.
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-image
vlastnosti 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-image
nehnuteľ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-repeat
a 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-image
nehnuteľ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-image
vlastníctva nemôžete pridať textové informácie . Výsledkom bude, že čitateľom obrazovky bude obraz chýbať.
Použite background-image
vlastnosť, 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 alt
atribútu, ktorý obrázok popisuje. Zadaný text vyberú čítačky obrazovky.
Myslite na to takto: background-image
je 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-image
môž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).