CSS háttérkép - Hogyan adhatunk kép URL-t a Div

Tegyük fel, hogy egy-két képet szeretne feltenni egy weboldalra. Az egyik mód a background-imageCSS tulajdonság használata.

Ez a tulajdonság egy vagy több háttérképet alkalmaz egy elemre, például egy , mint a dokumentáció. Használja esztétikai okokból, például texturált háttér hozzáadásához a weboldalához.

Kép hozzáadása

A tulajdonság segítségével egyszerűen hozzáadhat képet background-image. Csak adja meg a kép elérési útját az url()értékben.

A kép elérési útja URL lehet, amint az az alábbi példában látható:

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

Vagy lehet helyi út. Íme egy példa:

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

Több kép hozzáadása

Több képet alkalmazhat az background-imageingatlanra.

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

Ez sok kód. Bontjuk le.

Az egyes url()képértékeket vesszővel válassza el.

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

Helyezze el és javítsa képeit további tulajdonságok alkalmazásával.

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

Számos altulajdonság adható hozzá a háttérképekhez, például a background-repeatés background-position, amelyeket a fenti példában használtunk. A háttérképhez akár színátmeneteket is hozzáadhat.

Nézze meg, hogy néz ki, amikor mindent összerakunk.

Rend ügyek

A képek sorrendje a halmozási sorrend miatt számít a kérdésekre. Ez azt jelenti, hogy az első felsorolt ​​kép a legközelebb van a felhasználóhoz, a dokumentáció szerint. Aztán a következő, a következő és így tovább.

Itt egy példa.

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

Két képet soroltunk fel a fenti kódba. Az első kép (morocco-blue.png) a második előtt lesz (oriental-tiles.png). Mindkét kép ugyanolyan méretű és átlátszatlan, ezért csak az első képet látjuk.

De ha a második képet (oriental-tiles.png) 200 képponttal jobbra mozgatjuk, akkor annak egy részét láthatja (a többi rejtve marad).

Így néz ki, amikor mindent összerakunk.

Mikor érdemes háttérképet használni?

Nagyon sok tetszik az background-imageingatlanban. De van egy hátránya.

Előfordulhat, hogy a kép nem minden felhasználó számára hozzáférhető - mutat rá a dokumentáció, mint azok, akik képernyőolvasókat használnak.

Ez azért van, mert nem adhat hozzá szöveges információkat az background-imageingatlanhoz. Ennek eredményeként a képet hiányolják a képernyőolvasók.

background-imageCsak akkor használja az ingatlant, ha valamilyen díszítést kell hozzáadnia az oldalához. Ellenkező esetben használja a HTML elemet, ha egy képnek jelentése vagy célja van, mint a dokumentáció megjegyzi.

Így hozzáadhat szöveget egy képelemhez az altattribútum segítségével, amely leírja a képet. A megadott szöveget a képernyőolvasók veszik fel.

Gondoljon így: background-imageCSS tulajdonság, és a CSS a bemutatásra vagy a stílusra összpontosít; A HTML a szemantikára vagy a jelentésre összpontosít.

Amikor a képekről van szó, lehetőségei vannak. Ha képre van szükség a díszítéshez, akkor az background-imageingatlan jó választás lehet az Ön számára.

A programozás megtanulásáról és a legjobb módszerekről írok ( amymhaddad.com).