Tarkime, kad norite įdėti vieną ar du vaizdus į tinklalapį. Vienas iš būdų yra naudoti background-imageCSS nuosavybę.

Ši savybė elementui, pvz., A , taiko vieną ar daugiau fono paveikslėlių , kaip paaiškinta dokumentuose. Naudokite jį dėl estetinių priežasčių, pavyzdžiui, pridėdami tekstūruotą foną prie savo tinklalapio.

Pridėti vaizdą

Naudojant background-imagenuosavybę lengva pridėti vaizdą . Tiesiog nurodykite kelią į vaizdą url()vertėje.

Vaizdo kelias gali būti URL, kaip parodyta toliau pateiktame pavyzdyje:

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

Arba tai gali būti vietinis kelias. Štai pavyzdys:

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

Pridėti kelis vaizdus

background-imageNuosavybei galite pritaikyti kelis vaizdus .

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

Tai daug kodo. Sugrupuokime.

Kiekvieną vaizdo url()vertę atskirkite kableliu.

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

Dabar padėkite ir patobulinkite savo vaizdus pritaikydami papildomas ypatybes.

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

Yra keletas papildomų ypatybių, kurias galite pridėti prie savo fono paveikslėlių, pvz., background-repeatIr background-position, kurias mes naudojome aukščiau pateiktame pavyzdyje. Jūs netgi galite pridėti gradientų prie fono paveikslėlio.

Pažiūrėkite, kaip atrodo, kai viską sujungiame.

Užsakymo dalykai

Tvarka, kuria pateikiate vaizdus, ​​yra svarbi dėl kaupimo tvarkos. Tai reiškia, kad pirmasis pateiktas vaizdas yra arčiausiai vartotojo, remiantis dokumentais. Tada kitas ir kitas, ir taip toliau.

Štai pavyzdys.

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

Aukščiau pateiktame kode išvardijome du vaizdus. Pirmasis vaizdas (morocco-blue.png) bus priešais antrąjį (oriental-tiles.png). Abu vaizdai yra vienodo dydžio ir neturi neskaidrumo, todėl matome tik pirmąjį vaizdą.

Bet jei mes perkelsime antrąjį vaizdą (oriental-tiles.png) į dešinę 200 taškų, pamatysite jo dalį (likusi dalis lieka paslėpta).

Štai kaip atrodo, kai viską sujungiame.

Kada turėtumėte naudoti fono paveikslėlį?

background-imageTurtas gali labai patikti . Tačiau yra ir trūkumas.

Vaizdas gali būti prieinamas ne visiems vartotojams, nurodoma dokumentacijoje, kaip ir tiems, kurie naudojasi ekrano skaitytuvais.

Taip yra todėl, kad prie background-imagenuosavybės negalima pridėti tekstinės informacijos . Todėl ekrano skaitytuvai praleis vaizdą.

background-imageNuosavybę naudokite tik tada, kai jums reikia šiek tiek papuošti savo puslapį. Kitu atveju naudokite HTML elementą, jei vaizdas turi prasmę ar tikslą, kaip pažymima dokumentuose.

Tokiu būdu prie vaizdo elemento galite pridėti tekstą naudodami altatributą, kuris apibūdina vaizdą. Pateiktą tekstą paims ekrano skaitytuvai.

Pagalvokite apie tai taip: background-imageyra CSS ypatybė, o CSS pagrindinis dėmesys skiriamas pristatymui ar stiliui; HTML orientuotas į semantiką ar prasmę.

Kalbant apie vaizdus, ​​turite galimybių. Jei dekoravimui reikalingas vaizdas, background-imageturtas jums gali būti tinkamas pasirinkimas.

Rašau apie mokymąsi programuoti ir geriausius būdus tai padaryti ( amymhaddad.com).