Úvod
Veľkosť obrázka na pozadí môžeme určiť pomocou vlastnosti background-size. Môžeme urobiť obrázok ako ľavý, natiahnutý a prispôsobený dostupnému priestoru. Existuje toľko syntaxí na implementáciu vlastnosti background-size. Vlastnosť vlastnosti background-size môžeme nastaviť pomocou hodnôt a jednotkových hodnôt.
V jednotkových hodnotách môžeme definovať vlastnosť background-size vo forme percent alebo pixelov. Môžeme to definovať aj pomocou globálnej hodnoty. Môžeme to implementovať pomocou globálnej hodnoty pomocou nižšie uvedeného úryvku.
čo robí počítač rýchlym
.card-hero inherit
Poďme krátko pochopiť tému.
Hodnoty kľúčových slov
Hodnotu kľúčového slova môžeme použiť pomocou cover a include. Pomocou týchto hodnôt kľúčových slov môžeme zmeniť veľkosť pozadia.
1. Kryt:
Veľkosť pozadia môžeme nastaviť pomocou kľúčového slova cover. Ak zadefinujeme veľkosť pozadia ako obal, potom sa obrázok zmestí do kontajnera bez toho, aby zanechal nejaké miesto. Tiež vylepší obraz tak, aby sa zmestil na obrazovku.
Poďme to pochopiť pomocou nižšie uvedeného príkladu.
Príklad 1:
kód:
funkcia python chr
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> Výkon
Vysvetlenie:
Vo vyššie uvedenom kóde sú tri obrázky na pozadí kombinované pomocou vlastnosti background-image. Vlastnosť background-size určuje veľkosti pre každý obrázok na pozadí: 30 % šírka pre prvý obrázok, 40 % šírka pre druhý obrázok a obal pre tretí obrázok. Vlastnosť background-position je pre každý obrázok nastavená inak, aby sa vytvorila vyvážená kompozícia.