Pildi lisamine URL-ist – HTML

Pildi Lisamine Url Ist Html



HTML-is muudavad pildid veebisaidid atraktiivsemaks ja saavutavad inimeste kavatsused. See võimaldab arendajatel kohandada oma veebilehti erinevate piltidega. Lisaks saavad nad lisada need otse Internetist, kopeerides soovitud pildi URL-i ja määrates selle seejärel ' src ” atribuut pildisildi sees. Lisaks saavad arendajad lisada pildi CSS-i atribuudi abil, mida nimetatakse ' taustapilt ”.

See postitus selgitab lühidalt URL-ist pildi lisamise meetodit.

Kuidas lisada pilti URL-ist HTML-is/CSS-is?

HTML/CSS-is on pildi lisamiseks saadaval kaks meetodit, kasutades allolevat URL-i:





1. meetod: lisage pilt, kasutades elementi

' ” element on üks tühi element, millel puudub alamsisu ja lõpumärgend. ' src ” ja „ kõike ” on kaks peamist atribuuti, mida kasutatakse märgendi „ ” sees.



Vaatame allolevaid juhiseid pildi lisamiseks elemendi abil!



1. samm: looge div-konteiner

Esiteks looge div konteiner, kasutades '

” silti. Seejärel sisestage ' klass ” atribuut ja määrata klassile vastavalt soovile nimi.



2. samm: sisestage pealkiri

Järgmisena kasutage nõutavat pealkirja silti

' kuni '
” silti. Näiteks kasutame märgendit

ja lisame konkreetse teksti päisena avamis- ja sulgemismärgendite sisse.


3. samm: lisage pilt URL-i abil

Pärast seda lisage ' ” ja sisestage pildisildi sisse alltoodud atribuudid:



  • “ src ” atribuuti kasutatakse meediumifaili lisamiseks. Selleks käivitage soovitud veebibrauser ja kopeerige soovitud pildi URL.
  • Seejärel määrake URL väärtusena src ” atribuut.
  • Järgmiseks ' kõike ” kasutatakse pildile nime lisamiseks, kui seda mingil põhjusel ei kuvata.
  • “ kõrgus ” atribuut määrab elemendi kõrguse vastavalt antud väärtusele.
  • “ laius ” kasutatakse elemendi laiuse määramiseks:
< div klass = 'img-kontiner' >

< h2 > Lisage pilt koos URL-iga < / h2 >

< img src = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' kõike = 'Pilt!' kõrgus = '400 pikslit' laius = '300 pikslit' / >

< / div >

Vastavalt alltoodud väljundile on määratud pilt edukalt lisatud:



2. meetod: lisage pilt HTML-i CSS-i atribuutide abil

Arendajad saavad lisada pildi ka URL-ist, kasutades CSS-i ' taustapilt ”CSS. selleks järgige alltoodud samme.

1. samm: sisestage pealkiri

Esmalt sisestage päise tekst

avamise ja sulgemise sildi abil.

2. samm: looge div-konteiner

Järgmisena looge div-konteiner, kasutades märgendit

, ja lisage selle nimega klassi atribuut:

> Lisage pilt koos URL-iga >

= 'img-konteiner' > >

3. toiming. Juurdepääs konteinerile

Nüüd pääsete klassile punktivalija kaudu . ” ja varem loodud klassi nimi.

4. samm: lisage pilt, kasutades CSS-i atribuuti 'background-image'.

Pärast seda rakendage allpool loetletud CSS-i atribuute, et lisada pilt klassis olevast URL-ist:

.img-konteiner {

kõrgus : 400 pikslit ;

laius : 250 pikslit ;

tausta suurus : sisaldama ;

Taustapilt : url ( https : //pildid .pexels .com/photos/ 2260800 /pexels-foto- 2260800 .jpeg? auto = tihenda&cs = tinysrgb&w = 1260 &h = 750 &dpr = üks )

}

Ülaltoodud koodis:

  • “ kõrgus ” atribuuti kasutatakse elemendi kõrguse määramiseks.
  • “ laius ” kasutatakse elemendi laiuse suuruse määramiseks.
  • “ tausta suurus ” kasutatakse taustaelemendi suuruse määramiseks.
  • “ taustapilt ” atribuut lisab pildi elemendi tagaküljele. Sellel vastaval eesmärgil kasutatakse „ url() ' funktsiooni kasutatakse pildi lisamiseks ja pildi URL-i kleepimiseks funktsiooni ' () ”.

Väljund

Olete õppinud tundma erinevaid URL-ist piltide lisamise meetodeid.

Järeldus

URL-ist pildi lisamiseks saavad arendajad kasutada ” silti. Seejärel sisestage ' src ” atribuut ja määrake URL väärtuseks „src”. Lisaks saab kasutaja lisada URL-ist pildi, kasutades CSS-i ' taustapilt ” vara. Selles kirjutises on kirjeldatud meetodid pildi lisamiseks URL-ist HTML/CSS-is.

muud

Kategooria

Lemmik Postitused

ServerStats Boti lisamine Discordis

Stringi tagastamine funktsioonist C

SQL-iga liitumine mitmel tingimusel

Rakenduste üleviimine ühest Android-seadmest teise

Grafana Dockeri koostamine

Kuidas parandada Discordis RTC-ühenduse tõrget

Kuidas parsida CSV-faili PHP-ga

Kuidas joonistada kaks joont MATLABis

Mida tähendab Dall-E2 ja stabiilne difusioon, millel on sama kiire, kuid erinevad tulemused

Kuidas installida Windows 7 (virtuaalne masin) VMware'i?

Safari vahemälu ja sirvimisandmete tühjendamine iPhone'is

HKEY_USERS | Kuidas sobitada kasutajaprofiili kaustadega

Kuidas liituda Discord Fortnite'i serveriga

Kuidas PowerShelli abil tekstifailidest andmeid ekstraheerida

20 turvanõuannet Raspberry Pi jaoks

Redis XTRIM

Kuidas CSS-i abil linnuke / linnuke joonistada

Looge Kubernetes EndpointSlices

Kuidas kasutada PHP getdate() funktsiooni

Webmini installimine Linux Mint 21-sse