Wstęp

Rozmiar obrazu tła możemy określić za pomocą właściwości tła-size. Możemy sprawić, że obraz będzie lewy, rozciągnięty i dopasowany do dostępnej przestrzeni. Istnieje wiele składni implementacji właściwości rozmiaru tła. Możemy ustawić właściwość rozmiaru tła za pomocą wartości i wartości jednostkowych.

W wartościach jednostkowych możemy zdefiniować właściwość rozmiaru tła w postaci procentów lub pikseli. Możemy to zdefiniować również za pomocą wartości globalnej. Możemy to zaimplementować za pomocą wartości globalnej za pomocą poniższego fragmentu.

PowerShell z komentarzami wielowierszowymi

 .card-hero inherit 

Wyjaśnijmy krótko temat.

Wartości słów kluczowych

Możemy użyć wartości słowa kluczowego za pomocą cover i contain. Za pomocą tych wartości słów kluczowych możemy zmienić rozmiar tła.

1. Okładka:

Rozmiar tła możemy ustawić za pomocą słowa kluczowego cover. Jeśli jako okładkę zdefiniujemy rozmiar tła, to obraz zmieści się w pojemniku, nie pozostawiając miejsca. Poprawi to również obraz, aby dopasować go do ekranu.

Wyjaśnijmy to na przykładzie poniższego przykładu.

Przykład 1:

Kod:

pobierz youtube za pomocą vlc

 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> 

Wyjście

Wyjaśnienie:

W powyższym kodzie trzy obrazy tła są łączone przy użyciu właściwości tła-image. Właściwość tła określa rozmiary każdego obrazu tła: 30% szerokości dla pierwszego obrazu, 40% szerokości dla drugiego obrazu i pokrycie dla trzeciego obrazu. Właściwość tła-położenie jest ustawiana inaczej dla każdego obrazu, aby stworzyć zrównoważoną kompozycję.