Johdanto

Voimme määrittää taustakuvan koon background-size-ominaisuuden avulla. Voimme tehdä kuvan vasemmalle, venytetyksi ja sopivaksi käytettävissä olevaan tilaan. Taustakokoominaisuuden toteuttamiseen on niin monia syntakseja. Voimme asettaa taustakokoominaisuuden ominaisuuden arvojen ja yksikköarvojen avulla.

Yksikköarvoissa voimme määritellä taustakoon ominaisuuden prosentteina tai pikseleinä. Voimme määritellä sen myös globaalin arvon avulla. Voimme toteuttaa sen globaalin arvon avulla alla olevan katkelman avulla.

kuinka osoittimen viittaus poistetaan kohdassa c

 .card-hero inherit 

Ymmärretäänpä aihe lyhyesti.

Avainsanojen arvot

Voimme käyttää avainsanaa arvoa cover- ja include-avulla. Voimme muuttaa taustan kokoa näiden avainsanaarvojen avulla.

1. Kansi:

Voimme asettaa taustan koon cover-avainsanan avulla. Jos määritämme taustan koon kanneksi, niin kuva mahtuu säiliöön jättämättä tilaa. Se myös parantaa kuvaa niin, että se sopii näytölle.

Ymmärrämme tämä alla olevan esimerkin avulla.

Esimerkki 1:

merkkijonon muuntaminen kokonaisluvuksi

Koodi:

 Document body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } .background-container { position: relative; width: 100vw; height: 100vh; background-image: url(&apos;https://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-beautiful.webp&apos;); background-size: cover; background-position: center; text-align: center; color: white; } .background-container h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); } <p>Where every step unveils a new wonder.</p> 

Lähtö

Selitys:

Yllä olevassa koodissa kolme taustakuvaa yhdistetään käyttämällä background-image-ominaisuutta. Back-size-ominaisuus määrittää kunkin taustakuvan koot: 30 % leveys ensimmäiselle kuvalle, 40 % leveys toiselle kuvalle ja kansi kolmannelle kuvalle. Taustan sijainti -ominaisuus asetetaan jokaiselle kuvalle eri tavalla tasapainoisen sommitelman luomiseksi.