Kuvan lisääminen URL-osoitteesta – HTML

Kuvan Lisaaminen Url Osoitteesta Html



HTML:ssä kuvat tekevät verkkosivustoista houkuttelevampia ja saavuttavat ihmisten tarkoituksen. Sen avulla kehittäjät voivat muokata verkkosivujaan erilaisilla kuvilla. Lisäksi he voivat lisätä ne suoraan Internetistä kopioimalla halutun kuvan URL-osoitteen ja määrittämällä sen sitten ' src ”-attribuutti kuvatunnisteen sisällä. Lisäksi kehittäjät voivat lisätä kuvan CSS-ominaisuuden avulla, joka tunnetaan nimellä ' taustakuva ”.

Tämä viesti selittää lyhyesti menetelmän kuvan lisäämiseksi URL-osoitteesta.

Kuinka lisätä kuva URL-osoitteesta HTML/CSS:ssä?

HTML/CSS:ssä on kaksi tapaa lisätä kuva käyttämällä URL-osoitetta, joka on lueteltu alla:





Tapa 1: Lisää kuva käyttämällä -elementtiä

' ”-elementti on yksi tyhjä elementti, jolla ei ole alisisältöä ja lopputunnistetta. ' src ' ja ' kaikki ' ovat kaksi keskeistä attribuuttia, joita käytetään ' '-tunnisteen sisällä.



Katsotaanpa alla annettuja ohjeita kuvan lisäämiseksi käyttämällä -elementtiä!



Vaihe 1: Tee div-säiliö

Luo ensin div-säilö käyttämällä '

' -tunniste. Lisää sitten ' luokkaa ” attribuutti ja anna luokalle nimi halutessasi.



Vaihe 2: Lisää otsikko

Käytä seuraavaksi vaadittua otsikkotunnistetta '

”–”
' -tunniste. Käytämme esimerkiksi tunnistetta

ja lisäämme tietyn tekstin otsikoksi avaus- ja sulkemistunnisteiden sisään.


Vaihe 3: Lisää kuva URL-osoitteen avulla

Lisää sen jälkeen ' ” -tunnisteen ja lisää alla luetellut attribuutit kuvatunnisteen sisään:



  • ' src ” -attribuuttia käytetään mediatiedoston lisäämiseen. Tätä tarkoitusta varten käynnistä haluamasi verkkoselain ja kopioi haluamasi kuvan URL-osoite.
  • Määritä sitten URL-osoite ' src ”-attribuutti.
  • Seuraava, ' kaikki ” käytetään nimen lisäämiseen kuvalle, kun sitä ei jostain syystä näytetä.
  • ' korkeus ”-ominaisuus määrittää elementin korkeuden annetun arvon mukaan.
  • ' leveys ” käytetään elementin leveyden asettamiseen:
< div luokkaa = 'img-conatiner' >

< h2 > Lisää kuva URL-osoitteella < / h2 >

< img src = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' kaikki = 'Kuva!' korkeus = '400px' leveys = '300px' / >

< / div >

Alla olevan tulosteen mukaan määritetty kuva on lisätty onnistuneesti:



Tapa 2: Lisää kuva käyttämällä HTML:n CSS-ominaisuuksia

Kehittäjät voivat myös lisätä kuvan URL-osoitteesta käyttämällä CSS:ää. taustakuva ”CSS. noudata tätä tarkoitusta varten alla annettuja ohjeita.

Vaihe 1: Lisää otsikko

Lisää ensin otsikkoteksti

-aloitus- ja sulkemistunnisteen avulla.

Vaihe 2: Luo div-säilö

Luo seuraavaksi div-säilö käyttämällä

-tunnistetta ja lisää luokkaattribuutti sen nimellä:

> Lisää kuva URL-osoitteella >

= 'img-säiliö' > >

Vaihe 3: Käytä säilöä

Siirry nyt luokkaan pistevalitsimella ' . ” ja aiemmin luotu luokan nimi.

Vaihe 4: Lisää kuva käyttämällä 'background-image' CSS-ominaisuutta

Käytä sen jälkeen alla lueteltuja CSS-ominaisuuksia lisätäksesi kuvan luokan sisällä olevasta URL-osoitteesta:

.img-container {

korkeus : 400 pikseliä ;

leveys : 250 pikseliä ;

taustan kokoinen : sisältää ;

Taustakuva : url ( https : //kuvat .pexels .com/photos/ 2260800 /pexels-valokuva- 2260800 .jpeg? auto = pakkaa&cs = tinysrgb&w = 1260 &h = 750 &dpr = yksi )

}

Yllä annetussa koodissa:

  • ' korkeus ” -ominaisuutta käytetään elementin korkeuden asettamiseen.
  • ' leveys ' käytetään määrittämään elementin leveyskoko.
  • ' taustan kokoinen ' käytetään taustaelementin koon asettamiseen.
  • ' taustakuva ”-ominaisuus lisää kuvan elementin takapuolelle. Tätä vastaavaa tarkoitusta varten ' url() ' -toimintoa käytetään kuvan lisäämiseen ja kuvan URL-osoitteen liittämiseen toimintoon ' () ”.

Lähtö

Olet oppinut eri menetelmistä kuvien lisäämiseksi URL-osoitteesta.

Johtopäätös

Jos haluat lisätä kuvan URL-osoitteesta, kehittäjät voivat käyttää ' ' -tunniste. Lisää sitten ' src ' -attribuutti ja määritä URL-osoite 'src'-arvoksi. Lisäksi käyttäjä voi lisätä kuvan URL-osoitteesta käyttämällä CSS ' taustakuva ” omaisuutta. Tämä kirjoitus on ilmoittanut menetelmät kuvan lisäämiseksi URL-osoitteesta HTML/CSS:ssä.

muu

Luokka

Suosittu Viestiä

Automaattinen päivityskoodi HTML:ssä sisällönkuvauskenttien avulla

Johdatus kondensaattoreihin, kapasitanssiin ja varaukseen

Kuinka portti Node.js:n Buffer.from()/Buffer.alloc() API:hen?

Kuinka luoda HTML-peruutuspainike, joka ohjaa URL-osoitteeseen

LUO TAULUKKO Schema Postgresissa

Explorer.exe-kaatumisen vianetsintävinkkejä - Winhelponline

ESP32 vs ESP8266 – kumpi on parempi?

Kuinka käynnistää Apache HTTPD uudelleen Ubuntu 22.04:ssä

Mitkä ovat PowerShellin rekisteriavaimet ja miten se toimii

Kuinka voin asettaa CSS-reunuksen vain yhdelle puolelle?

Kuinka käyttää Grep-komentoa Linuxissa

Muuta sivuston asetusten käyttöoikeuksia Androidissa

Mikä on käyttöliittymä olioorientoituneessa PHP:ssä

Kuinka ottaa Django Project käyttöön AWS EC2:ssa

Mitä ovat Escape-sekvenssit Javassa

Kuinka korjata 'Ydinohjainta ei ole asennettu (rc=-1908)' -virhe VirtualBoxissa?

Kuinka asentaa Docker Volume isännöintiin?

Kuinka kirjoittaa yksikkötesti Golangiin?

Mitä 'git rev-parse' tekee?

Kuinka muuttaa painikkeen väriä hiirellä CSS:ssä?