☰

Bootstrap 4: как включить фоновое изображение без CSS

tag-icon • tag-icon css
Bootstrap 4: как включить фоновое изображение без CSS

Bootstrap определяет классы CSS, охватывающие большинство распространенных элементов дизайна веб-сайта, но я не могу понять, как указать файл фонового изображения с помощью классов Bootstrap, не добавляя громоздкий настраиваемый CSS.

решение1

Вам нужно будет задать свойство background-image:url(''); с помощью style, чтобы задать путь к изображению, и вы можете сделать изображение адаптивным, используя класс .bg-image.
Вот как это можно сделать:
Добавьте background-image через встроенный CSS.
Добавьте класс .bg-image, чтобы правильно масштабировать изображение и включить адаптивность.
Пример:

<div class="bg-image" 
     style="background-image: url('https://i.postimg.cc/ZnHTP71s/aircraft-airplane-boat-1575833.jpg');
            height: 100vh">
</div>

vh означает высоту области просмотра.
Здесь height:100vh означает 100% доступной высоты.

Связанный контент