Invoering
Met behulp van de eigenschap background-size kunnen we de grootte van de achtergrondafbeelding bepalen. We kunnen de afbeelding links maken, uitgerekt en passend maken voor de beschikbare ruimte. Er zijn zoveel syntaxis voor de implementatie van de eigenschap background-size. We kunnen de eigenschap achtergrondgrootte instellen met behulp van waarden en eenheidswaarden.
In eenheidswaarden kunnen we de eigenschap achtergrondgrootte definiëren in de vorm van percentages of pixels. We kunnen het ook definiëren met behulp van mondiale waarde. We kunnen het implementeren met behulp van mondiale waarde via het onderstaande fragment.
kaneel versus mate
.card-hero inherit
Laten we het onderwerp kort begrijpen.
Zoekwoordwaarden
We kunnen de zoekwoordwaarde gebruiken met behulp van cover en contain. Met behulp van deze trefwoordwaarden kunnen we de achtergrondgrootte wijzigen.
1. Hoes:
We kunnen de achtergrondgrootte instellen met behulp van het cover-trefwoord. Als we de achtergrondgrootte als omslag definiëren, past de afbeelding in de container zonder ruimte over te laten. Het verbetert ook het beeld zodat het op het scherm past.
Laten we dit begrijpen met behulp van het onderstaande voorbeeld.
e-r-modeldiagram
Voorbeeld 1:
Code:
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> Uitvoer
Uitleg:
In de bovenstaande code worden drie achtergrondafbeeldingen gecombineerd met behulp van de eigenschap background-image. De eigenschap background-size specificeert de afmetingen voor elke achtergrondafbeelding: 30% breedte voor de eerste afbeelding, 40% breedte voor de tweede afbeelding en omslag voor de derde afbeelding. De eigenschap achtergrondpositie wordt voor elke afbeelding anders ingesteld om een evenwichtige compositie te creëren.