Vaizdo pridėjimas iš URL – HTML

Vaizdo Pridejimas Is Url Html



HTML, vaizdai daro svetaines patrauklesnes ir pasiekia žmonių ketinimus. Tai leidžia kūrėjams tinkinti savo tinklalapius su skirtingais vaizdais. Be to, jie gali juos pridėti tiesiai iš interneto, nukopijuodami norimo vaizdo URL ir tada nurodydami jį kaip „ src “ atributas vaizdo žymos viduje. Be to, kūrėjai gali pridėti vaizdą naudodami CSS ypatybę, žinomą kaip „ fono vaizdas “.

Šiame įraše trumpai paaiškinama, kaip pridėti vaizdą iš URL.

Kaip pridėti vaizdą iš URL HTML / CSS?

HTML/CSS galimi du būdai pridėti vaizdą naudojant URL, kuris pateiktas toliau:







1 būdas: pridėkite vaizdą naudodami elementą

“ elementas yra vienas tuščias elementas, neturintis antrinio turinio ir pabaigos žymos. „ src “ ir „ viskas “ yra du pagrindiniai atributai, naudojami žymoje „ “.



Pažvelkime į toliau pateiktas instrukcijas, kaip pridėti vaizdą naudojant elementą !



1 veiksmas: sukurkite „div“ konteinerį

Pirmiausia sukurkite „div“ konteinerį naudodami „

“ žymą. Tada įterpkite „ klasė ” atributą ir pagal norą priskirti klasei pavadinimą.





2 veiksmas: įterpkite antraštę

Tada naudokite reikiamą antraštės žymą iš „

'į'
“ žymą. Pavyzdžiui, mes naudosime žymą

ir įtrauksime konkretų tekstą kaip antraštę pradžios ir uždarymo žymose.


3 veiksmas: pridėkite vaizdą naudodami URL

Po to pridėkite „ “ žymą ir į vaizdo žymą įterpkite toliau nurodytus atributus:



  • src “ atributas naudojamas medijos failui pridėti. Tuo tikslu paleiskite norimą žiniatinklio naršyklę ir nukopijuokite norimo vaizdo URL.
  • Tada nurodykite URL kaip „ reikšmę src “ atributas.
  • Kitas, ' viskas “ naudojamas pavadinant vaizdą, kai jis dėl kokių nors priežasčių nerodomas.
  • aukščio “ ypatybė nurodo elemento aukštį pagal nurodytą reikšmę.
  • plotis “ naudojamas elemento pločiui nustatyti:
< div klasė = 'img-conatin' >

< h2 > Pridėti vaizdą su URL < / h2 >

< img src = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' viskas = 'Vaizdas!' aukščio = '400 piks.' plotis = '300 piks.' / >

< / div >

Pagal toliau pateiktą išvestį nurodytas vaizdas buvo sėkmingai pridėtas:



2 būdas: pridėkite vaizdą naudodami CSS ypatybes HTML

Kūrėjai taip pat gali pridėti vaizdą iš URL naudodami CSS. fono vaizdas “ CSS. šiuo tikslu atlikite toliau nurodytus veiksmus.

1 veiksmas: įterpkite antraštę

Pirmiausia įterpkite antraštės tekstą naudodami

atidarymo ir uždarymo žymas.

2 veiksmas: sukurkite „div“ konteinerį

Tada sukurkite „div“ konteinerį naudodami žymą

ir pridėkite klasės atributą su jos pavadinimu:

> Pridėti vaizdą su URL >

= 'img konteineris' > >

3 veiksmas: pasiekite konteinerį

Dabar pasiekite klasę naudodami taškų parinkiklį “ . “ ir klasės pavadinimas, kuris buvo sukurtas anksčiau.

4 veiksmas: pridėkite vaizdą naudodami CSS ypatybę „fono vaizdas“.

Po to taikykite toliau pateiktas CSS ypatybes, kad pridėtumėte vaizdą iš URL klasėje:

.img-container {

aukščio : 400 piks ;

plotis : 250 piks ;

fono dydžio : turėti ;

Fono vaizdas : url ( https : //vaizdai .pekselių .com/photos/ 2260800 /pexels-foto- 2260800 .jpeg? automatinis = suspausti&cs = tinysrgb&w = 1260 m &h = 750 &dpr = vienas )

}

Aukščiau pateiktame kode:

  • aukščio ” ypatybė naudojama elemento aukščiui nustatyti.
  • plotis “ naudojamas elemento pločio dydžiui nurodyti.
  • fono dydžio “ naudojamas fono elemento dydžiui nustatyti.
  • fono vaizdas “ savybė prideda vaizdą elemento gale. Šiuo atitinkamu tikslu „ url() Funkcija 'naudojama norint pridėti vaizdą ir įklijuoti vaizdo URL į funkciją ' () “.

Išvestis

Sužinojote apie skirtingus vaizdų pridėjimo iš URL būdus.

Išvada

Norėdami pridėti vaizdą iš URL, kūrėjai gali naudoti „ “ žymą. Tada įterpkite „ src “ atributą ir priskirkite URL kaip „src“ reikšmę. Be to, vartotojas gali pridėti vaizdą iš URL, naudodamas CSS ' fono vaizdas ' nuosavybė. Šiame įraše buvo nurodyti vaizdo pridėjimo iš URL HTML/CSS metodai.