Kép hozzáadása URL-ből – HTML

Kep Hozzaadasa Url Bol Html



A HTML-ben a képek vonzóbbá teszik a webhelyeket, és elérik az emberek szándékait. Lehetővé teszi a fejlesztők számára, hogy különböző képekkel testreszabják weboldalaikat. Ezenkívül közvetlenül az internetről is hozzáadhatják őket úgy, hogy kimásolják a kívánt kép URL-jét, majd megadják azt a „ src ” attribútum a képcímkén belül. Sőt, a fejlesztők hozzáadhatják a képet a „CSS” tulajdonság segítségével. háttérkép ”.

Ez a bejegyzés röviden elmagyarázza a kép URL-ből való hozzáadásának módját.

Hogyan lehet képet hozzáadni egy URL-ből a HTML/CSS-ben?

A HTML/CSS-ben két módszer áll rendelkezésre a kép hozzáadására az alábbi URL-cím használatával:







1. módszer: Kép hozzáadása az elem használatával

Az ' ” elem egyetlen üres elem, amelynek nincs gyermektartalma és záró címkéje. Az ' src ” és „ minden ” két kulcs attribútum, amelyek az „ ” címkén belül használatosak.



Nézzük meg az alábbi utasításokat a kép hozzáadásához az elem használatával!



1. lépés: Hozzon létre egy div tárolót

Először hozzon létre egy div tárolót a '

” címke. Ezután illessze be a „ osztály ” attribútumot, és kívánság szerint adjon nevet az osztálynak.





2. lépés: Helyezze be a címsort

Ezután használja a szükséges címsor címkét a '

' nak nek '
” címke. Például a

címkét használjuk, és az adott szöveget fejlécként adjuk hozzá a nyitó és záró címkékhez.


3. lépés: Kép hozzáadása URL használatával

Ezután adjon hozzá egy „ ” címkét, és illessze be az alábbi attribútumokat a képcímkébe:



  • ' src ” attribútumot használjuk a médiafájl hozzáadásához. Ebből a célból indítsa el a kívánt webböngészőt, és másolja ki a kívánt kép URL-címét.
  • Ezután adja meg az URL-t a ' src ' tulajdonság.
  • Következő, ' minden ” a kép elnevezésére szolgál, ha az valamilyen okból nem jelenik meg.
  • ' magasság ” tulajdonság határozza meg az elem magasságát az adott értéknek megfelelően.
  • ' szélesség ” az elem szélességének beállításához:
< div osztály = 'img-conatiner' >

< h2 > Kép hozzáadása URL-lel < / h2 >

< img src = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' minden = 'Kép!' magasság = '400 képpont' szélesség = '300 képpont' / >

< / div >

Az alábbi kimenetnek megfelelően a megadott kép sikeresen hozzáadva:



2. módszer: Kép hozzáadása a CSS-tulajdonságok használatával a HTML-ben

A fejlesztők egy URL-ből is hozzáadhatják a képet a CSS segítségével ' háttérkép ” CSS. ebből a célból kövesse az alábbi lépéseket.

1. lépés: Helyezze be a címsort

Először illesszen be egy címsort a

nyitó és záró címke segítségével.

2. lépés: Hozzon létre div tárolót

Ezután hozzon létre egy div tárolót a

címke használatával, és adjon hozzá egy osztály attribútumot a nevével:

> Kép hozzáadása URL-lel >

= 'img-container' > >

3. lépés: Hozzáférés a tárolóhoz

Most lépjen be az osztályba a pontválasztóval ' . ” és a korábban létrehozott osztálynév.

4. lépés: Kép hozzáadása a „background-image” CSS-tulajdonság használatával

Ezt követően alkalmazza az alább felsorolt ​​CSS-tulajdonságokat a kép hozzáadásához az osztályon belüli URL-ről:

.img-container {

magasság : 400 képpont ;

szélesség : 250 képpont ;

háttér méretű : tartalmaz ;

Háttérkép : url ( https : //képek .pexel .com/photos/ 2260800 /pexel-fotó- 2260800 .jpeg? auto = tömörít&cs = tinysrgb&w = 1260 &h = 750 &dpr = egy )

}

A fent megadott kódban:

  • ' magasság ” tulajdonság az elem magasságának beállítására szolgál.
  • ' szélesség ” az elem szélességi méretének megadására szolgál.
  • ' háttér méretű ” a háttérelem méretének beállítására szolgál.
  • ' háttérkép ” tulajdonság hozzáad egy képet az elem hátoldalához. Ebből a célból a „ url() ' függvény a kép hozzáadására és a kép URL-jének beillesztésére szolgál ' () ”.

Kimenet

Megtanulta a képek URL-ből történő hozzáadásának különböző módszereit.

Következtetés

Kép hozzáadásához egy URL-ből a fejlesztők használhatják a „ ” címke. Ezután illessze be a „ src ” attribútumot, és rendelje hozzá az URL-t „src” értékként. Ezenkívül a felhasználó hozzáadhat egy képet az URL-ből a CSS használatával háttérkép ' ingatlan. Ez az írás meghatározta a kép hozzáadásának módját az URL-ből a HTML/CSS-ben.