Dodajanje slike iz URL-ja – HTML

Dodajanje Slike Iz Url Ja Html



V HTML-ju slike naredijo spletna mesta privlačnejša in dosežejo namene ljudi. Razvijalcem omogoča, da prilagodijo svoje spletne strani z različnimi slikami. Poleg tega jih lahko dodajo neposredno iz interneta, tako da kopirajo URL želene slike in ga nato določijo kot vrednost » src ” znotraj oznake slike. Poleg tega lahko razvijalci dodajo sliko s pomočjo lastnosti CSS, znane kot » slika ozadja ”.

Ta objava bo na kratko razložila metodo za dodajanje slike iz URL-ja.

Kako dodati sliko iz URL-ja v HTML/CSS?

V HTML/CSS sta na voljo dva načina za dodajanje slike z uporabo URL-ja, ki je naveden spodaj:







1. način: dodajte sliko z uporabo elementa

' ” je en sam prazen element, ki nima podrejene vsebine in končne oznake. ' src « in » vse « sta dva ključna atributa, ki se uporabljata znotraj oznake » «.



Oglejmo si spodnja navodila za dodajanje slike z elementom !



1. korak: Naredite vsebnik div

Najprej ustvarite vsebnik div z uporabo »

' oznaka. Nato vstavite » razred ” in razredu dodelite ime po želji.





2. korak: Vstavite naslov

Nato uporabite zahtevano oznako naslova iz »

' do '
' oznaka. Na primer, uporabili bomo oznako

in dodali določeno besedilo kot naslov znotraj začetne in končne oznake.


3. korak: dodajte sliko z URL-jem

Po tem dodajte » ” in v slikovno oznako vstavite spodaj navedene atribute:



  • src ” se uporablja za dodajanje predstavnostne datoteke. V ta namen zaženite želeni spletni brskalnik in kopirajte URL želene slike.
  • Nato podajte URL kot vrednost » src ” atribut.
  • Naslednji, ' vse ” se uporablja za dodajanje imena slike, ko ta iz nekega razloga ni prikazana.
  • višina ” lastnost podaja višino elementa glede na dano vrednost.
  • premer ” ki se uporablja za nastavitev širine elementa:
< div razred = 'img-conatiner' >

< h2 > Dodajte sliko z URL-jem < / h2 >

< img src = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' vse = 'Podoba!' višina = '400px' premer = '300px' / >

< / div >

Glede na spodnji rezultat je bila podana slika uspešno dodana:



2. način: dodajte sliko z uporabo lastnosti CSS v HTML

Razvijalci lahko dodajo sliko tudi iz URL-ja s pomočjo CSS-ja slika ozadja ” CSS. v ta namen sledite spodnjim korakom.

1. korak: Vstavite naslov

Najprej vstavite besedilo naslova s ​​pomočjo začetne in končne oznake

.

2. korak: Ustvarite vsebnik div

Nato ustvarite vsebnik div z uporabo oznake

in dodajte atribut razreda z njegovim imenom:

> Dodaj sliko z URL >

= 'img-kontejner' > >

3. korak: Dostop do vsebnika

Zdaj dostopajte do razreda prek izbirnika pik ' . « in ime razreda, ki je bil ustvarjen prej.

4. korak: dodajte sliko z lastnostjo CSS »background-image«.

Nato uporabite spodaj navedene lastnosti CSS, da dodate sliko iz URL-ja znotraj razreda:

.img-vsebnik {

višina : 400 slikovnih pik ;

premer : 250 slikovnih pik ;

velikost ozadja : vsebujejo ;

Slika ozadja : url ( https : //slike .pexels .com/fotografije/ 2260800 /pexels-foto- 2260800 .jpeg? avto = stiskanje&cs = tinysrgb&w = 1260 &h = 750 &dpr = eno )

}

V zgoraj navedeni kodi:

  • višina Lastnost se uporablja za nastavitev višine elementa.
  • premer ” se uporablja za določanje velikosti širine elementa.
  • velikost ozadja ” se uporablja za nastavitev velikosti elementa ozadja.
  • slika ozadja ” lastnost doda sliko na zadnji strani elementa. V ta ustrezen namen je ' url() ' se uporablja za dodajanje slike in lepljenje URL-ja slike v funkciji ' () ”.

Izhod

Naučili ste se o različnih metodah dodajanja slik iz URL-ja.

Zaključek

Če želite dodati sliko iz URL-ja, lahko razvijalci uporabijo » ' oznaka. Nato vstavite » src « in dodelite URL kot vrednost »src«. Poleg tega lahko uporabnik doda sliko iz URL-ja z uporabo CSS ' slika ozadja ” lastnina. Ta zapis je navedel metode za dodajanje slike iz URL-ja v HTML/CSS.