Pridanie obrázka z adresy URL – HTML

Pridanie Obrazka Z Adresy Url Html



V HTML obrázky robia webové stránky atraktívnejšími a dosahujú zámery ľudí. Umožňuje vývojárom prispôsobiť svoje webové stránky rôznymi obrázkami. Okrem toho ich môžu pridať priamo z internetu tak, že skopírujú adresu URL požadovaného obrázka a potom ju špecifikujú ako hodnotu „ src ” vo vnútri značky obrázka. Okrem toho môžu vývojári pridať obrázok pomocou vlastnosti CSS známej ako „ obrázok na pozadí “.

Tento príspevok stručne vysvetlí spôsob pridávania obrázka z adresy URL.

Ako pridať obrázok z adresy URL v HTML / CSS?

V HTML/CSS sú k dispozícii dva spôsoby pridania obrázka pomocou adresy URL, ktorá je uvedená nižšie:







Metóda 1: Pridajte obrázok pomocou prvku

' ” element je jeden neplatný element, ktorý nemá žiadny podradený obsah a koncovú značku. ' src “ a „ všetko ” sú dva kľúčové atribúty, ktoré sa používajú vo vnútri značky „ “.



Pozrime sa na nižšie uvedené pokyny na pridanie obrázka pomocou prvku !



Krok 1: Vytvorte kontajner div

Najprv vytvorte kontajner div pomocou „

” tag. Potom vložte „ trieda ” a priraďte triede názov podľa želania.





Krok 2: Vložte nadpis

Ďalej použite požadovanú značku nadpisu z „

“ až “
” tag. Napríklad použijeme značku

a do úvodnej a záverečnej značky pridáme konkrétny text ako nadpis.


Krok 3: Pridajte obrázok pomocou adresy URL

Potom pridajte „ ” a do značky obrázka vložte atribúty uvedené nižšie:



  • src ” sa používa na pridanie mediálneho súboru. Na tento účel spustite požadovaný webový prehliadač a skopírujte požadovanú adresu URL obrázka.
  • Potom zadajte adresu URL ako hodnotu „ src “.
  • Ďalšie, ' všetko “ sa používa na pridanie názvu k obrázku, keď sa z nejakého dôvodu nezobrazuje.
  • výška vlastnosť určuje výšku prvku podľa danej hodnoty.
  • šírka ” používa sa na nastavenie šírky prvku:
< div trieda = 'img-conatiner' >

< h2 > Pridať obrázok s URL < / h2 >

< img src = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' všetko = 'Obrázok!' výška = '400 pixelov' šírka = '300 pixelov' / >

< / div >

Podľa nižšie uvedeného výstupu bol zadaný obrázok úspešne pridaný:



Metóda 2: Pridajte obrázok pomocou vlastností CSS v HTML

Vývojári môžu tiež pridať obrázok z adresy URL pomocou CSS “ obrázok na pozadí “CSS. na tento účel postupujte podľa krokov uvedených nižšie.

Krok 1: Vložte nadpis

Najprv vložte text nadpisu pomocou otváracej a zatváracej značky

.

Krok 2: Vytvorte kontajner div

Potom vytvorte kontajner div pomocou značky

a pridajte atribút triedy s jeho názvom:

> Pridať obrázok s adresou URL >

= 'img-kontajner' > >

Krok 3: Prístup ku kontajneru

Teraz prejdite do triedy pomocou selektora bodiek “ . “ a názov triedy, ktorý bol vytvorený predtým.

Krok 4: Pridajte obrázok pomocou vlastnosti CSS „obrázok na pozadí“.

Potom použite vlastnosti CSS uvedené nižšie na pridanie obrázka z adresy URL do triedy:

.img-kontajner {

výška : 400 pixelov ;

šírka : 250 pixelov ;

veľkosť pozadia : obsahujú ;

Obrázok na pozadí : url ( https : //snímky .pexels .com/photos/ 2260800 /pexels-photo- 2260800 .jpeg? auto = komprimovať&cs = tinysrgb&w = 1260 &h = 750 &dpr = jeden )

}

Vo vyššie uvedenom kóde:

  • výška Vlastnosť ” sa používa na nastavenie výšky prvku.
  • šírka “ sa používa na určenie veľkosti šírky prvku.
  • veľkosť pozadia ” sa používa na nastavenie veľkosti prvku pozadia.
  • obrázok na pozadí “ vlastnosť pridá obrázok na zadnú stranu prvku. Na tento zodpovedajúci účel sa „ url() “ funkcia sa používa na pridanie obrázka a vloženie adresy URL obrázka do funkcie “ () “.

Výkon

Dozvedeli ste sa o rôznych metódach pridávania obrázkov z adresy URL.

Záver

Na pridanie obrázka z adresy URL môžu vývojári použiť „ ” tag. Potom vložte „ src ” a priraďte URL ako hodnotu “src”. Okrem toho môže používateľ pridať obrázok z adresy URL pomocou CSS „ obrázok na pozadí ' nehnuteľnosť. Tento zápis uvádza metódy na pridanie obrázka z adresy URL do HTML/CSS.