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
Í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).