Tilføjelse af et billede fra en URL – HTML

Tilfojelse Af Et Billede Fra En Url Html



I HTML gør billeder websteder mere attraktive og opnår folks hensigt. Det giver udviklere mulighed for at tilpasse deres websider med forskellige billeder. Derudover kan de tilføje dem direkte fra internettet ved at kopiere URL'en på det ønskede billede og derefter angive det som værdien af ​​' src ” attribut inde i billedtagget. Desuden kan udviklere tilføje billedet ved hjælp af CSS-egenskaben kendt som ' baggrundsbillede ”.

Dette indlæg vil kort forklare metoden til at tilføje billedet fra en URL.

Sådan tilføjes et billede fra en URL i HTML/CSS?

I HTML/CSS er to metoder tilgængelige til at tilføje et billede ved hjælp af URL'en, som er angivet nedenfor:





Metode 1: Tilføj billede ved at bruge Element

Det ' ” element er et enkelt ugyldigt element, der ikke har noget underordnet indhold og afsluttende tag. Det ' src ' og ' alt ” er to nøgleattributter, der bruges inde i tagget “ ”.



Lad os se på nedenstående instruktioner for at tilføje et billede ved hjælp af -elementet!



Trin 1: Lav en div-beholder

Først skal du oprette en div-beholder ved at bruge '

” tag. Indsæt derefter ' klasse ” tildele og tildele et navn til klassen efter ønske.



Trin 2: Indsæt overskrift

Brug derefter det påkrævede overskriftstag fra '

' til '
” tag. For eksempel vil vi bruge

-tagget og tilføje den bestemte tekst som en overskrift inde i de indledende og afsluttende tags.


Trin 3: Tilføj et billede ved hjælp af URL

Derefter tilføjes en ' ” tag og indsæt nedenstående attributter i billedtagget:



  • “ src ” attribut bruges til at tilføje mediefilen. Til det formål skal du starte din ønskede webbrowser og kopiere den ønskede billed-URL.
  • Angiv derefter URL'en som en værdi af ' src ' attribut.
  • Næste, ' alt ” bruges til at tilføje et navn til billedet, når det af en eller anden grund ikke vises.
  • “ højde ” egenskab angiver elementets højde i henhold til den givne værdi.
  • “ bredde ' bruges til at indstille bredden af ​​elementet:
< div klasse = 'img-conatiner' >

< h2 > Tilføj billede med URL < / h2 >

< img src = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' alt = 'Billede!' højde = '400px' bredde = '300px' / >

< / div >

Ifølge nedenstående output er det angivne billede blevet tilføjet med succes:



Metode 2: Tilføj billede ved hjælp af CSS-egenskaber i HTML

Udviklere kan også tilføje billedet fra en URL ved hjælp af CSS ' baggrundsbillede 'CSS. til dette formål skal du følge nedenstående trin.

Trin 1: Indsæt overskrift

Først skal du indsætte en overskriftstekst ved hjælp af

-åbnings- og lukketagget.

Trin 2: Opret div Container

Derefter skal du oprette en div-beholder ved at bruge

-tagget og tilføje en klasseattribut med dens navn:

> Tilføj billede med URL >

= 'img-container' > >

Trin 3: Adgang til container

Få nu adgang til klassen gennem prikvælgeren ' . ” og klassenavnet, som blev oprettet tidligere.

Trin 4: Tilføj billede ved hjælp af 'baggrundsbillede' CSS-egenskab

Anvend derefter nedenstående CSS-egenskaber for at tilføje billedet fra en URL inde i klassen:

.img-container {

højde : 400px ;

bredde : 250 px ;

baggrundsstørrelse : indeholde ;

Baggrundsbillede : url ( https : //billeder .pexels .com/photos/ 2260800 /pexels-foto- 2260800 .jpeg? auto = komprimere&cs = tinysrgb&w = 1260 &h = 750 &dpr = en )

}

I den ovenfor angivne kode:

  • “ højde ” egenskab bruges til at indstille højden af ​​elementet.
  • “ bredde ' bruges til at angive elementets breddestørrelse.
  • “ baggrundsstørrelse ” bruges til at indstille størrelsen på baggrundselementet.
  • “ baggrundsbillede ” egenskab tilføjer et billede på elementets bagside. Til dette tilsvarende formål er ' url() '-funktionen bruges til at tilføje billedet og indsætte URL'en på billedet i funktionen ' () ”.

Produktion

Du har lært om de forskellige metoder til at tilføje billeder fra en URL.

Konklusion

For at tilføje et billede fra en URL kan udviklere bruge ' ” tag. Indsæt derefter ' src ' attribut og tildel URL'en som 'src'-værdien. Desuden kan brugeren tilføje et billede fra URL'en ved at bruge CSS ' baggrundsbillede ” ejendom. Denne skrive-up har angivet metoderne til at tilføje billedet fra URL'en i HTML/CSS.

Andet

Kategori

Populære Indlæg

Sådan afrundes en dobbelt til to decimaler i Java

Sådan håndteres indholdsredigerbare ændringshændelser i JavaScript

Sådan bruges readarray-kommando til at læse 2D-array i Bash

C# Bool Type

Sådan indstilles højden af ​​histogrambjælken i MATLAB

Sådan løses 'Kan ikke finde modul'-fejl ved brug af Node.js?

PDF-generering i Golang (PDF)

Sådan bruges historiekommandoen i Linux

Hvad er spiller-id i Roblox?

Sådan løser du fejlen 'Intet modul navngivet Sklearn' i Python

Sådan installeres Node.js fra en fil i Linux?

Sådan konfigurerer og bruger du Windows Hello?

Sådan udføres strengsammenligning i JavaScript

MongoDB i C++

Windows 7 giver dig mulighed for at ændre logonbaggrundsbillede - Winhelponline

Sådan opretter du et bootbart USB-thumb-drev af Proxmox VE 8

Funktion med flere udgange i MATLAB

Sådan bruges Uniqid()-funktionen i PHP

Sådan trimmes videoer på iPhone - Nem vejledning

Pandaer læser tekstfil