Attēla pievienošana no URL — HTML

Attela Pievienosana No Url Html



HTML valodā attēli padara vietnes pievilcīgākas un atbilst cilvēku nodomiem. Tas ļauj izstrādātājiem pielāgot savas tīmekļa lapas ar dažādiem attēliem. Turklāt viņi var tos pievienot tieši no interneta, kopējot vajadzīgā attēla URL un pēc tam norādot to kā ' src ” atribūts attēla taga iekšpusē. Turklāt izstrādātāji var pievienot attēlu, izmantojot CSS rekvizītu, kas pazīstams kā ' fona attēls ”.

Šajā ziņojumā īsumā tiks izskaidrota metode attēla pievienošanai no URL.

Kā pievienot attēlu no URL HTML/CSS?

HTML/CSS ir pieejamas divas metodes attēla pievienošanai, izmantojot tālāk norādīto URL:







1. metode: pievienojiet attēlu, izmantojot elementu

' ” elements ir viens tukšs elements, kuram nav pakārtota satura un beigu taga. ' src ' un ' viss ” ir divi galvenie atribūti, kas tiek izmantoti tagā “ ”.



Apskatīsim tālāk sniegtos norādījumus par attēla pievienošanu, izmantojot elementu!



1. darbība. Izveidojiet div konteineru

Vispirms izveidojiet div konteineru, izmantojot “

” tagu. Pēc tam ievietojiet ' klasē ” atribūtu un piešķir klasei nosaukumu atbilstoši vēlmei.





2. darbība: ievietojiet virsrakstu

Pēc tam izmantojiet nepieciešamo virsraksta tagu no “

'uz'
” tagu. Piemēram, mēs izmantosim tagu

un pievienosim konkrēto tekstu kā virsrakstu sākuma un aizvēršanas tagos.


3. darbība. Pievienojiet attēlu, izmantojot URL

Pēc tam pievienojiet ' ” tagu un attēla tagā ievietojiet tālāk norādītos atribūtus:



  • ' src ” tiek izmantots multivides faila pievienošanai. Šim nolūkam palaidiet vajadzīgo tīmekļa pārlūkprogrammu un kopējiet vajadzīgā attēla URL.
  • Pēc tam norādiet URL kā ' src ” atribūts.
  • Nākamais, ' viss ” tiek izmantots, lai attēlam pievienotu nosaukumu, ja tas kāda iemesla dēļ netiek rādīts.
  • ' augstums ” rekvizīts norāda elementa augstumu atbilstoši norādītajai vērtībai.
  • ' platums ” izmanto elementa platuma iestatīšanai:
< div klasē = 'img-conatiner' >

< h2 > Pievienojiet attēlu ar URL < / h2 >

< img src = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' viss = 'Attēls!' augstums = '400 pikseļi' platums = '300 pikseļi' / >

< / div >

Saskaņā ar tālāk norādīto izvadi norādītais attēls ir veiksmīgi pievienots:



2. metode: pievienojiet attēlu, izmantojot CSS rekvizītus HTML

Izstrādātāji var arī pievienot attēlu no URL, izmantojot CSS. fona attēls ”CSS. šim nolūkam veiciet tālāk norādītās darbības.

1. darbība: ievietojiet virsrakstu

Vispirms ievietojiet virsraksta tekstu, izmantojot

sākuma un aizvēršanas tagu.

2. darbība. Izveidojiet div konteineru

Pēc tam izveidojiet div konteineru, izmantojot tagu

, un pievienojiet klases atribūtu ar tā nosaukumu:

> Pievienojiet attēlu ar URL >

= 'img-container' > >

3. darbība. Piekļūstiet konteineram

Tagad piekļūstiet klasei, izmantojot punktu atlasītāju ' . ” un klases nosaukums, kas tika izveidots iepriekš.

4. darbība. Pievienojiet attēlu, izmantojot CSS rekvizītu “fona attēls”.

Pēc tam izmantojiet tālāk norādītos CSS rekvizītus, lai pievienotu attēlu no klases URL:

.img-container {

augstums : 400 pikseļi ;

platums : 250 pikseļi ;

fona izmērs : satur ;

Fona attēls : url ( https : //attēli .pekseļi .com/photos/ 2260800 /pekseļi-foto- 2260800 .jpeg? auto = saspiest&cs = tinysrgb&w = 1260. gads &h = 750 &dpr = viens )

}

Iepriekš norādītajā kodā:

  • ' augstums ” rekvizīts tiek izmantots elementa augstuma iestatīšanai.
  • ' platums ” tiek izmantots, lai norādītu elementa platuma izmēru.
  • ' fona izmērs ” tiek izmantots, lai iestatītu fona elementa izmēru.
  • ' fona attēls ” īpašums pievieno attēlu elementa aizmugurē. Šim atbilstošajam mērķim ' url() ” funkcija tiek izmantota attēla pievienošanai un attēla URL ielīmēšanai funkcijā “ () ”.

Izvade

Jūs uzzinājāt par dažādām metodēm attēlu pievienošanai no URL.

Secinājums

Lai pievienotu attēlu no URL, izstrādātāji var izmantot ” tagu. Pēc tam ievietojiet ' src ” atribūtu un piešķiriet URL kā vērtību “src”. Turklāt lietotājs var pievienot attēlu no URL, izmantojot CSS ' fona attēls ” īpašums. Šajā pārrakstā ir norādītas metodes attēla pievienošanai no URL HTML/CSS.