Tegyük fel, hogy egy-két képet szeretne feltenni egy weboldalra. Az egyik mód a background-image
CSS 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-image
ingatlanra.
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-image
ingatlanban. 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-image
ingatlanhoz. Ennek eredményeként a képet hiányolják a képernyőolvasók.
background-image
Csak 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 alt
attribú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-image
CSS 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-image
ingatlan 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).