CSS fona attēls - kā pievienot attēla URL savai div

Pieņemsim, ka vēlaties ievietot attēlu vai divus tīmekļa vietnē. Viens veids ir izmantot background-imageCSS īpašumu.

Šis rekvizīts elementam, piemēram, a , piemēro vienu vai vairākus fona attēlus , kā paskaidrots dokumentācijā. Izmantojiet to estētisku apsvērumu dēļ, piemēram, teksturēta fona pievienošanai savai vietnei.

Pievienojiet attēlu

Izmantojot background-imageīpašumu, ir viegli pievienot attēlu . Vienkārši norādiet ceļu uz attēlu url()vērtībā.

Attēla ceļš var būt URL, kā parādīts zemāk esošajā piemērā:

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

Vai arī tas var būt vietējais ceļš. Lūk, piemērs:

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

Pievienot vairākus attēlus

background-imageĪpašumam varat piemērot vairākus attēlus .

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

Tas ir daudz kodu. Sadalīsim to.

Atdaliet katru attēla url()vērtību ar komatu.

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

Tagad novietojiet un uzlabojiet attēlus, izmantojot papildu īpašības.

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

Fona attēliem varat pievienot vairākas apakšīpašības, piemēram, background-repeatun background-position, kuras mēs izmantojām iepriekš minētajā piemērā. Jūs pat varat pievienot gradientus fona attēlam.

Skatiet, kā tas izskatās, kad mēs visu saliekam kopā.

Pasūtījums ir svarīgs

Kārtība, kādā jūs sakārtojat attēlus, ir sakārtošanas kārtības dēļ. Tas nozīmē, ka pirmais uzskaitītais attēls ir vistuvāk lietotājam, saskaņā ar dokumentāciju. Tad, nākamais un nākamais utt.

Lūk, piemērs.

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

Iepriekš esošajā kodā mēs esam uzskaitījuši divus attēlus. Pirmais attēls (morocco-blue.png) būs otrā priekšā (oriental-tiles.png). Abi attēli ir vienāda izmēra, un tiem nav necaurspīdīguma, tāpēc mēs redzam tikai pirmo attēlu.

Bet, ja mēs pārvietojam otro attēlu (oriental-tiles.png) pa labi par 200 pikseļiem, tad daļu no tā var redzēt (pārējais paliek paslēpts).

Lūk, kā tas izskatās, kad visu saliekam kopā.

Kad jums vajadzētu izmantot fona attēlu?

Īpašumā ir daudz background-imagepatīkamu. Bet tur ir trūkums.

Attēls, iespējams, nav pieejams visiem lietotājiem, norāda dokumentācija, tāpat kā tie, kas izmanto ekrāna lasītājus.

Tas ir tāpēc, ka background-imageīpašumam nevar pievienot tekstuālu informāciju . Rezultātā ekrāna lasītāji palaidīs garām attēlu.

Izmantojiet background-imageīpašumu tikai tad, kad lapai ir jāpievieno daži rotājumi. Pretējā gadījumā izmantojiet HTML elementu, ja attēlam ir nozīme vai mērķis, kā norādīts dokumentācijā.

Tādā veidā attēla elementam varat pievienot tekstu, izmantojot altatribūtu, kas apraksta attēlu. Iesniegto tekstu paņems ekrāna lasītāji.

Padomājiet par to šādā veidā: background-imageir CSS īpašums, un CSS koncentrējas uz prezentāciju vai stilu; HTML koncentrējas uz semantiku vai nozīmi.

Kad runa ir par attēliem, jums ir iespējas. Ja attēls ir nepieciešams dekorēšanai, background-imageīpašums jums var būt laba izvēle.

Es rakstu par mācīšanos programmēt un labākos veidus, kā to paveikt ( amymhaddad.com).