Ievads
Fona attēla izmēru varam noteikt, izmantojot īpašību background-size. Mēs varam izveidot attēlu pa kreisi, izstieptu un piemērotu pieejamajai telpai. Fona izmēra rekvizīta ieviešanai ir tik daudz sintakses. Fona izmēra rekvizītu var iestatīt, izmantojot vērtības un vienības vērtības.
Vienību vērtībās mēs varam definēt fona izmēra rekvizītu procentu vai pikseļu veidā. Mēs to varam definēt arī ar globālās vērtības palīdzību. Mēs varam to ieviest, izmantojot globālo vērtību, izmantojot tālāk norādīto fragmentu.
strep c
.card-hero inherit
Īsi sapratīsim tēmu.
Atslēgvārdu vērtības
Mēs varam izmantot atslēgvārdu vērtību ar vāka un satura palīdzību. Mēs varam mainīt fona izmēru ar šo atslēgvārdu vērtību palīdzību.
1. Vāks:
Fona izmēru varam iestatīt ar vāka atslēgvārda palīdzību. Ja fona izmēru definējam kā vāku, tad attēls ietilps konteinerā, neatstājot vietu. Tas arī uzlabos attēlu, lai tas atbilstu ekrānam.
Ļaujiet mums to saprast, izmantojot tālāk sniegto piemēru.
1. piemērs:
gimp mainīt krāsu
Kods:
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> Izvade
Paskaidrojums:
Iepriekš minētajā kodā trīs fona attēli ir apvienoti, izmantojot rekvizītu fona attēls. Rekvizīts background-size norāda katra fona attēla izmērus: 30% platums pirmajam attēlam, 40% platums otrajam attēlam un vāks trešajam attēlam. Fona pozīcijas rekvizīts katram attēlam tiek iestatīts atšķirīgi, lai izveidotu līdzsvarotu kompozīciju.