Въведение

Можем да определим размера на фоновото изображение с помощта на свойството background-size. Можем да направим изображението като ляво, разтегнато и подходящо за наличното пространство. Има толкова много синтаксиси за изпълнение на свойството размер на фона. Можем да зададем свойството на свойството размер на фона с помощта на стойности и единици.

В единични стойности можем да дефинираме свойството размер на фона под формата на проценти или пиксели. Можем да го дефинираме и с помощта на глобалната стойност. Можем да го приложим с помощта на глобалната стойност чрез помощта на фрагмента по-долу.

създаване на java нишка

 .card-hero inherit 

Нека разберем темата накратко.

Стойности на ключови думи

Можем да използваме стойността на ключовата дума с помощта на cover и contain. Можем да променим размера на фона с помощта на тези стойности на ключови думи.

1. Покритие:

Можем да зададем размера на фона с помощта на ключовата дума cover. Ако определим размера на фона като покритие, тогава изображението ще се побере в контейнера, без да оставя място. Освен това ще подобри изображението, за да пасне на екрана.

Нека разберем това с помощта на примера по-долу.

Пример 1:

Код:

 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> 

Изход

булево към низ

Обяснение:

В горния код три фонови изображения се комбинират с помощта на свойството background-image. Свойството background-size указва размерите за всяко фоново изображение: 30% ширина за първото изображение, 40% ширина за второто изображение и покритие за третото изображение. Свойството background-position се задава различно за всяко изображение, за да се създаде балансирана композиция.