Taustakuvien Lisääminen Elementteihin
background-image-ominaisuudella voidaan lisätä kuva HTML-elementin taustaksi. Perussyntaksi on hyvin yksinkertainen:
background-image: url("image-url.jpg");
background-image-ominaisuuden arvona käytetään url(), ja sulkujen sisällä määritellään kuvan url-osoite.
index.html
index.css
background-repeat
Määrittää, toistetaanko kuva vaakasuunnassa, pystysuunnassa, molemmissa vai ei lainkaan.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
background-position
background-position-ominaisuudella määritetään taustakuvan aloituspaikka elementin tausta-alueella. Tämän ominaisuuden avulla voidaan määrittää, mihin kohtaan taustakuva sijoitetaan ja miten se asemoidaan suhteessa elementtiin. Sijainti tulee asettaa sekä x- että y-akselille.
background-position: x y
index.html
index.css
background-size
background-size määrittää elementin taustakuvan koon. Sitä voidaan käyttää kuvan skaalaamiseen sopimaan elementtiin tai asettamaan taustakuvalle tietty koko.
background-size: auto | cover | contain | value in px/em/rem;
autosäilyttää taustakuvan alkuperäisen koon (oletus);coverskaalaa kuvan peittämään koko elementin säilyttäen kuvasuhteen, jolloin osa kuvasta voi rajautua pois;containskaalaa kuvan mahtumaan kokonaan elementin sisälle säilyttäen kuvasuhteen, jolloin elementtiin voi jäädä tyhjää tilaa;valueasettaa taustakuvalle mukautetut mitat, kuten100px 50pxtai prosentteina esimerkiksi50%.
index.html
index.css
1. Mitä background-image-ominaisuus tekee?
2. Mitä background-repeat-ominaisuus tekee?
3. Mikä ominaisuus määrittää elementin taustakuvan sijainnin?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you show me an example of how to use all these background properties together?
What is the difference between `cover` and `contain` for background-size?
How do I center a background image both vertically and horizontally?
Awesome!
Completion rate improved to 2.56Taustakuvien Lisääminen Elementteihin
Pyyhkäise näyttääksesi valikon
background-image-ominaisuudella voidaan lisätä kuva HTML-elementin taustaksi. Perussyntaksi on hyvin yksinkertainen:
background-image: url("image-url.jpg");
background-image-ominaisuuden arvona käytetään url(), ja sulkujen sisällä määritellään kuvan url-osoite.
index.html
index.css
background-repeat
Määrittää, toistetaanko kuva vaakasuunnassa, pystysuunnassa, molemmissa vai ei lainkaan.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
background-position
background-position-ominaisuudella määritetään taustakuvan aloituspaikka elementin tausta-alueella. Tämän ominaisuuden avulla voidaan määrittää, mihin kohtaan taustakuva sijoitetaan ja miten se asemoidaan suhteessa elementtiin. Sijainti tulee asettaa sekä x- että y-akselille.
background-position: x y
index.html
index.css
background-size
background-size määrittää elementin taustakuvan koon. Sitä voidaan käyttää kuvan skaalaamiseen sopimaan elementtiin tai asettamaan taustakuvalle tietty koko.
background-size: auto | cover | contain | value in px/em/rem;
autosäilyttää taustakuvan alkuperäisen koon (oletus);coverskaalaa kuvan peittämään koko elementin säilyttäen kuvasuhteen, jolloin osa kuvasta voi rajautua pois;containskaalaa kuvan mahtumaan kokonaan elementin sisälle säilyttäen kuvasuhteen, jolloin elementtiin voi jäädä tyhjää tilaa;valueasettaa taustakuvalle mukautetut mitat, kuten100px 50pxtai prosentteina esimerkiksi50%.
index.html
index.css
1. Mitä background-image-ominaisuus tekee?
2. Mitä background-repeat-ominaisuus tekee?
3. Mikä ominaisuus määrittää elementin taustakuvan sijainnin?
Kiitos palautteestasi!
