Dette innlegget vil kort forklare metoden for å legge til bildet fra en URL.
Hvordan legge til et bilde fra en URL i HTML/CSS?
I HTML/CSS er to metoder tilgjengelige for å legge til et bilde ved hjelp av URL-en, som er oppført nedenfor:
- Metode 1: Legg til bilde ved hjelp av et
-element i HTML
- Metode 2: Legg til bilde ved hjelp av CSS-egenskaper i HTML
Metode 1: Legg til bilde ved å bruke ![]()
-elementet
« '-elementet er et enkelt ugyldig element som ikke har noe underordnet innhold og sluttkode. « src ' og ' alt ' er to nøkkelattributter som brukes i '
'-taggen.
La oss se på instruksjonene nedenfor for å legge til et bilde ved å bruke -elementet!
Trinn 1: Lag en div-beholder
Lag først en div-beholder ved å bruke ' Deretter bruker du den nødvendige overskriftskoden fra ' ' til ' ' stikkord. For eksempel vil vi bruke Etter det legger du til en ' I henhold til utdataene nedenfor, er det spesifiserte bildet lagt til: Utviklere kan også legge til bildet fra en URL ved å bruke CSS ' bakgrunnsbilde 'CSS. for dette formålet, følg trinnene nedenfor. Sett først inn en overskriftstekst ved hjelp av Deretter oppretter du en div-beholder ved å bruke Nå får du tilgang til klassen gjennom punktvelgeren ' . ” og klassenavnet som ble opprettet tidligere. Deretter bruker du CSS-egenskapene nedenfor for å legge til bildet fra en URL i klassen: I koden ovenfor: Produksjon Du har lært om de forskjellige metodene for å legge til bilder fra en URL. For å legge til et bilde fra en URL, kan utviklere bruke '
Trinn 2: Sett inn overskrift
-taggen og legge til den aktuelle teksten som en overskrift i åpnings- og avslutningstaggen.
Trinn 3: Legg til et bilde ved å bruke URL ” tag og sett inn attributtene nedenfor i bildekoden:
< div klasse = 'img-conatiner' >
< h2 > Legg til bilde 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 = 'Bilde!' høyde = '400px' bredde = '300px' / >
< / div >
Metode 2: Legg til bilde ved hjelp av CSS-egenskaper i HTML
Trinn 1: Sett inn overskrift
åpnings- og lukketaggen.
Trinn 2: Opprett div-beholder
Trinn 3: Få tilgang til container
Trinn 4: Legg til bilde ved å bruke 'bakgrunnsbilde' CSS-egenskap
høyde : 400 piksler ;
bredde : 250 piksler ;
bakgrunnsstørrelse : inneholde ;
Bakgrunnsbilde : url ( https : //Bilder .pexels .com/photos/ 2260800 /pexels-photo- 2260800 .jpeg? auto = komprimere&cs = tinysrgb&w = 1260 &h = 750 &dpr = en )
}
Konklusjon
' stikkord. Deretter setter du inn ' src '-attributtet og tilordne URL-en som 'src'-verdien. Videre kan brukeren legge til et bilde fra URL-en ved å bruke CSS ' bakgrunnsbilde ' eiendom. Denne oppskriften har angitt metodene for å legge til bildet fra URL-en i HTML/CSS.