вступ
Ми можемо визначити розмір фонового зображення за допомогою властивості background-size. Ми можемо зробити зображення лівим, розтягнутим і підійти до наявного простору. Існує так багато синтаксису для реалізації властивості розміру фону. Ми можемо встановити властивість властивості background-size за допомогою значень і одиничних значень.
У одиничних значеннях ми можемо визначити властивість розміру фону у формі відсотків або пікселів. Ми також можемо визначити це за допомогою глобального значення. Ми можемо реалізувати це за допомогою глобального значення за допомогою наведеного нижче фрагмента.
float до рядка
.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('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> Вихід
список програм python
Пояснення:
У наведеному вище коді три фонові зображення поєднуються за допомогою властивості background-image. Властивість background-size визначає розміри для кожного фонового зображення: 30% ширини для першого зображення, 40% ширини для другого зображення та покриття для третього зображення. Властивість background-position встановлюється окремо для кожного зображення, щоб створити збалансовану композицію.