CSS fono paveikslėlis - kaip pridėti paveikslėlio URL prie savo div
Tarkime, kad norite įdėti vieną ar du vaizdus į tinklalapį. Vienas iš būdų yra naudoti background-image
CSS 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-image
nuosavybę 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-image
Nuosavybei 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-repeat
Ir 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-image
Turtas 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-image
nuosavybės negalima pridėti tekstinės informacijos . Todėl ekrano skaitytuvai praleis vaizdą.
background-image
Nuosavybę 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 alt
atributą, kuris apibūdina vaizdą. Pateiktą tekstą paims ekrano skaitytuvai.
Pagalvokite apie tai taip: background-image
yra 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-image
turtas jums gali būti tinkamas pasirinkimas.
Rašau apie mokymąsi programuoti ir geriausius būdus tai padaryti ( amymhaddad.com).