logo

Velikost ozadja v CSS

Uvod

Velikost slike ozadja lahko določimo s pomočjo lastnosti velikosti ozadja. Sliko lahko naredimo levo, raztegnjeno in prilagojeno razpoložljivemu prostoru. Obstaja toliko sintaks za implementacijo lastnosti velikosti ozadja. Lastnost lastnosti velikosti ozadja lahko nastavimo s pomočjo vrednosti in vrednosti enote.

V vrednostih enote lahko določimo lastnost velikosti ozadja v obliki odstotkov ali slikovnih pik. Lahko ga definiramo tudi s pomočjo globalne vrednosti. Izvedemo ga lahko s pomočjo globalne vrednosti s pomočjo spodnjega izrezka.

primer java do while
 .card-hero inherit 

Na kratko razumejmo temo.

Vrednosti ključnih besed

Ključno vrednost lahko uporabimo s pomočjo cover in contain. Velikost ozadja lahko spremenimo s pomočjo teh ključnih vrednosti.

1. Pokrov:

Velikost ozadja lahko nastavimo s pomočjo ključne besede cover. Če določimo velikost ozadja kot ovitek, se bo slika prilegala v vsebnik, ne da bi zapustila prostor. Prav tako bo izboljšal sliko, da bo ustrezala zaslonu.

Naj to razumemo s pomočjo spodnjega primera.

Primer 1:

računalnik izumil katerega leta

Koda:

 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> 

Izhod

Velikost ozadja v CSS

Pojasnilo:

V zgornji kodi so tri slike ozadja združene z lastnostjo background-image. Lastnost velikosti ozadja določa velikosti za vsako sliko ozadja: 30 % širine za prvo sliko, 40 % širine za drugo sliko in pokrov za tretjo sliko. Lastnost položaja ozadja je za vsako sliko nastavljena drugače, da se ustvari uravnotežena kompozicija.