Bevezetés

A háttérkép méretét a background-size tulajdonság segítségével tudjuk meghatározni. A képet balra, feszítettre és a rendelkezésre álló helyre illeszkedővé alakíthatjuk. Nagyon sok szintaxis létezik a háttérméret tulajdonság megvalósítására. A background-size property tulajdonságát értékek és egységértékek segítségével állíthatjuk be.

Az egységértékekben megadhatjuk a háttérméret tulajdonságot százalékok vagy pixelek formájában. Meghatározhatjuk a globális érték segítségével is. Globális érték segítségével tudjuk megvalósítani az alábbi részlet segítségével.

összefűzés java karakterlánc

 .card-hero inherit 

Értsük meg röviden a témát.

Kulcsszó értékek

Az érték kulcsszót a cover és a include segítségével használhatjuk. Ezen kulcsszóértékek segítségével tudjuk megváltoztatni a háttér méretét.

1. Borító:

A háttér méretét a cover kulcsszó segítségével tudjuk beállítani. Ha a háttér méretét fedőként definiáljuk, akkor a kép helyet hagyva belefér a tárolóba. Ezenkívül javítja a képet, hogy illeszkedjen a képernyőhöz.

Értsük meg ezt az alábbi példa segítségével.

1. példa:

Kód:

 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(&apos;https://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-beautiful.webp&apos;); 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> 

Kimenet

Magyarázat:

szelet java tömböt

A fenti kódban három háttérképet kombinálunk a background-image tulajdonság segítségével. A background-size tulajdonság megadja az egyes háttérképek méretét: 30% szélesség az első képnél, 40% szélesség a második képnél, és borító a harmadik képnél. A háttérpozíció tulajdonság minden egyes képnél eltérően van beállítva, hogy kiegyensúlyozott kompozíciót hozzon létre.