Přidání obrázku z adresy URL – HTML

Pridani Obrazku Z Adresy Url Html



V HTML obrázky dělají webové stránky atraktivnějšími a dosahují záměrů lidí. Umožňuje vývojářům přizpůsobit své webové stránky různými obrázky. Navíc je mohou přidat přímo z internetu zkopírováním adresy URL požadovaného obrázku a následným zadáním hodnoty „ src ” uvnitř značky obrázku. Kromě toho mohou vývojáři přidat obrázek pomocí vlastnosti CSS známé jako „ obrázek na pozadí “.

Tento příspěvek stručně vysvětlí způsob přidání obrázku z adresy URL.

Jak přidat obrázek z adresy URL v HTML/CSS?

V HTML/CSS jsou k dispozici dva způsoby přidání obrázku pomocí adresy URL, která je uvedena níže:







Metoda 1: Přidejte obrázek pomocí prvku

' ” element je jeden void element, který nemá žádný podřízený obsah a koncovou značku. ' src ' a ' všechno ” jsou dva klíčové atributy, které se používají uvnitř tagu “ ”.



Podívejme se na níže uvedené pokyny k přidání obrázku pomocí prvku !



Krok 1: Vytvořte kontejner div

Nejprve vytvořte kontejner div pomocí „

” tag. Poté vložte „ třída ” a přiřaďte třídě název podle přání.





Krok 2: Vložte nadpis

Dále použijte požadovanou značku nadpisu z „

“ až “
” tag. Využijeme například tag

a do úvodního a závěrečného tagu přidáme konkrétní text jako nadpis.


Krok 3: Přidejte obrázek pomocí adresy URL

Poté přidejte „ ” a do značky obrázku vložte níže uvedené atributy:



  • src Atribut ” se používá pro přidání mediálního souboru. Za tímto účelem spusťte požadovaný webový prohlížeč a zkopírujte požadovanou adresu URL obrázku.
  • Poté zadejte adresu URL jako hodnotu „ src ' atribut.
  • Další, ' všechno ” se používá pro přidání názvu obrázku, když není z nějakého důvodu zobrazen.
  • výška ” vlastnost určuje výšku prvku podle dané hodnoty.
  • šířka ” slouží k nastavení šířky prvku:
< div třída = 'img-conatiner' >

< h2 > Přidat obrázek 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šechno = 'Obraz!' výška = '400px' šířka = '300px' / >

< / div >

Podle níže uvedeného výstupu byl zadaný obrázek úspěšně přidán:



Metoda 2: Přidání obrázku pomocí vlastností CSS v HTML

Vývojáři mohou také přidat obrázek z adresy URL pomocí CSS “ obrázek na pozadí 'CSS.' za tímto účelem postupujte podle níže uvedených kroků.

Krok 1: Vložte nadpis

Nejprve vložte text nadpisu pomocí otevírací a uzavírací značky

.

Krok 2: Vytvořte kontejner div

Dále vytvořte kontejner div pomocí značky

a přidejte atribut třídy s jeho názvem:

> Přidat obrázek s adresou URL >

= 'img-kontejner' > >

Krok 3: Přístup ke kontejneru

Nyní vstupte do třídy pomocí tečkového voliče “ . “ a název třídy, který byl vytvořen dříve.

Krok 4: Přidejte obrázek pomocí vlastnosti CSS „obrázek na pozadí“.

Poté použijte níže uvedené vlastnosti CSS a přidejte obrázek z adresy URL do třídy:

.img-kontejner {

výška : 400 pixelů ;

šířka : 250 pixelů ;

velikost pozadí : obsahovat ;

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

}

Ve výše uvedeném kódu:

  • výška Vlastnost ” se používá pro nastavení výšky prvku.
  • šířka ” se používá k určení velikosti šířky prvku.
  • velikost pozadí ” se používá pro nastavení velikosti prvku pozadí.
  • obrázek na pozadí Vlastnost ” přidá obrázek na zadní stranu prvku. Pro tento odpovídající účel „ url() “ funkce se používá pro přidání obrázku a vložení URL obrázku do funkce “ () “.

Výstup

Dozvěděli jste se o různých metodách přidávání obrázků z adresy URL.

Závěr

Chcete-li přidat obrázek z adresy URL, mohou vývojáři použít „ ” tag. Poté vložte „ src ” a přiřaďte URL jako hodnotu “src”. Dále může uživatel přidat obrázek z adresy URL pomocí CSS „ obrázek na pozadí ' vlastnictví. Tento zápis uvádí metody pro přidání obrázku z adresy URL v HTML/CSS.