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 elem használatával a HTML-ben
- 2. módszer: Kép hozzáadása a CSS-tulajdonságok használatával a HTML-ben
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 ' Ezután használja a szükséges címsor címkét a ' ' nak nek ' ” címke. Például a Ezután adjon hozzá egy „ ” címkét, és illessze be az alábbi attribútumokat a képcímkébe: Az alábbi kimenetnek megfelelően a megadott kép sikeresen hozzáadva: 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. Először illesszen be egy címsort a Ezután hozzon létre egy div tárolót a Most lépjen be az osztályba a pontválasztóval ' . ” és a korábban létrehozott osztálynév. 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: A fent megadott kódban: Kimenet Megtanulta a képek URL-ből történő hozzáadásának különböző módszereit. 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.
2. lépés: Helyezze be a címsort
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
< 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 >
2. módszer: Kép hozzáadása a CSS-tulajdonságok használatával a HTML-ben
1. lépés: Helyezze be a címsort
nyitó és záró címke segítségével.
2. lépés: Hozzon létre div tárolót
> Kép hozzáadása URL-lel
>
3. lépés: Hozzáférés a tárolóhoz
4. lépés: Kép hozzáadása a „background-image” CSS-tulajdonság használatával
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 )
}
Következtetés