Bakgrundsstorlek i CSS
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.
.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.
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.
