Introduktion
Vi kan bestemme størrelsen på baggrundsbilledet ved hjælp af egenskaben baggrundsstørrelse. Vi kan lave billedet som venstre, strakt og passe til den tilgængelige plads. Der er så mange syntakser til implementering af egenskaben i baggrundsstørrelse. Vi kan indstille egenskaben for ejendom i baggrundsstørrelse ved hjælp af værdier og enhedsværdier.
I enhedsværdier kan vi definere egenskaben baggrundsstørrelse i form af procenter eller pixels. Vi kan også definere det ved hjælp af global værdi. Vi kan implementere det ved hjælp af global værdi ved hjælp af nedenstående uddrag.
array tilføjer elementer java
.card-hero inherit
Lad os kort forstå emnet.
Søgeordsværdier
Vi kan bruge søgeordsværdien ved hjælp af cover and contain. Vi kan ændre baggrundsstørrelsen ved hjælp af disse søgeordsværdier.
1. Cover:
Vi kan indstille baggrundsstørrelsen ved hjælp af cover-søgeordet. Hvis vi definerer baggrundsstørrelsen som et omslag, så vil billedet passe ind i beholderen uden at efterlade plads. Det vil også forbedre billedet, så det passer til skærmen.
Lad os forstå dette ved hjælp af nedenstående eksempel.
Eksempel 1:
Kode:
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('https://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-beautiful.webp'); 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> Produktion
katodestrålerørsmonitor
Forklaring:
I ovenstående kode kombineres tre baggrundsbilleder ved hjælp af egenskaben baggrundsbillede. Egenskaben for baggrundsstørrelse angiver størrelserne for hvert baggrundsbillede: 30 % bredde for det første billede, 40 % bredde for det andet billede og cover for det tredje billede. Egenskaben for baggrundsposition er indstillet forskelligt for hvert billede for at skabe en afbalanceret komposition.