Introduktion
Vi kan bestämma storleken på bakgrundsbilden med hjälp av egenskapen background-size. Vi kan göra bilden som vänster, sträckt och anpassad för det tillgängliga utrymmet. Det finns så många syntaxer för implementeringen av egenskapen i bakgrundsstorlek. Vi kan ställa in egenskapen för egendom i bakgrundsstorlek med hjälp av värden och enhetsvärden.
I enhetsvärden kan vi definiera egenskapen bakgrundsstorlek i form av procent eller pixlar. Vi kan också definiera det med hjälp av globalt värde. Vi kan implementera det med hjälp av globalt värde med hjälp av utdraget nedan.
spetsig vinkel
.card-hero inherit
Låt oss kortfattat förstå ämnet.
Nyckelordsvärden
Vi kan använda nyckelordet värde med hjälp av cover and contain. Vi kan ändra bakgrundsstorleken med hjälp av dessa nyckelordsvärden.
1. Omslag:
Vi kan ställa in bakgrundsstorleken med hjälp av nyckelordet omslag. Om vi definierar bakgrundsstorleken som ett omslag, kommer bilden att passa in i behållaren utan att lämna något utrymme. Det kommer också att förbättra bilden så att den passar skärmen.
Låt oss förstå detta med hjälp av exemplet nedan.
partiellt derivat i latex
Exempel 1:
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('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
Förklaring:
I ovanstående kod kombineras tre bakgrundsbilder med hjälp av egenskapen background-image. Egenskapen bakgrundsstorlek anger storlekarna för varje bakgrundsbild: 30 % bredd för den första bilden, 40 % bredd för den andra bilden och omslag för den tredje bilden. Egenskapen för bakgrundsposition ställs in olika för varje bild för att skapa en balanserad komposition.