CSS-i taustpilt - kuidas lisada pildi URL oma div

Oletame, et soovite veebilehele lisada pildi või kaks. Üks võimalus on kasutada background-imageCSS-i vara.

See omadus rakendab elemendile, näiteks a , ühe või mitu taustapilti , nagu dokumentatsioon selgitab. Kasutage seda esteetilistel põhjustel, näiteks tekstuurilise tausta lisamiseks oma veebilehele.

Lisage pilt

Atribuudi abil on pilti lihtne lisada background-image. Sisestage lihtsalt url()väärtuses oleva pildi tee .

Pildi tee võib olla URL, nagu on näidatud allpool toodud näites:

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

Või võib see olla kohalik rada. Siin on näide:

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

Lisage mitu pilti

Atribuudile saate rakendada mitu pilti background-image.

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

See on palju koodi. Jagame selle laiali.

Eraldage iga pildi url()väärtus komaga.

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

Nüüd asetage ja täiustage oma pilte, rakendades täiendavaid omadusi.

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

Taustapiltidele saate lisada mitu alamomadust, näiteks background-repeatja background-position, mida me ülaltoodud näites kasutasime. Võite isegi taustpildile lisada gradiente.

Vaadake, kuidas see välja näeb, kui me kõik kokku paneme.

Telli küsimused

Piltide loetlemise järjekord on virnastamise järjekorra tõttu küsimustes oluline. See tähendab, et esimene loetletud pilt on vastavalt dokumentatsioonile kasutajale kõige lähemal. Siis, järgmine ja järgmine jne.

Siin on näide.

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

Oleme ülaltoodud koodis lisanud kaks pilti. Esimene pilt (morocco-blue.png) jääb teise ette (oriental-tiles.png). Mõlemad pildid on sama suurusega ja neil puudub läbipaistmatus, seega näeme ainult esimest pilti.

Kui aga teine ​​pilt (oriental-tiles.png) 200 piksli võrra paremale nihutatakse, siis näete osa sellest (ülejäänu jääb varjatuks).

See näeb välja, kui me kõik kokku paneme.

Millal peaksite kasutama taustpilti?

background-imageVara juures on palju meeldimist. Kuid on ka puudus.

Pilt ei pruugi kõigile kasutajatele juurdepääsetav olla, märgib dokumentatsioon, nagu ka need, kes kasutavad ekraanilugejaid.

Seda seetõttu, et te ei saa background-imageatribuudile lisada tekstiteavet . Seetõttu jääb ekraanilugejatel pilt vahele.

Kasutage background-imagevara ainult siis, kui peate oma lehele mõne kaunistuse lisama. Vastasel juhul kasutage HTML- elementi, kui pildil on tähendus või eesmärk, nagu dokumentatsioon märgib.

Nii saate pildielemendile teksti lisada, kasutades altatribuuti, mis kirjeldab pilti. Esitatud teksti korjavad ekraanilugejad üles.

Mõelge sellele nii: background-imageon CSS-i vara ja CSS keskendub esitlusele või stiilile; HTML keskendub semantikale või tähendusele.

Piltide osas on teil võimalusi. Kui kaunistamiseks on vaja pilti, võib background-imagekinnisvara olla teie jaoks hea valik.

Kirjutan programmeerimise õppimisest ja parimatest viisidest selle saavutamiseks ( amymhaddad.com).