Bootstrap 4:如何在沒有 CSS 的情況下包含背景圖片

Bootstrap 4:如何在沒有 CSS 的情況下包含背景圖片

Bootstrap 定義了 CSS 類別來涵蓋最常見的網站設計元素,但我無法弄清楚如何使用 Bootstrap 類別指定背景圖片檔案而不添加笨重的自訂 CSS。

答案1

你必須給出background-image:url('');屬性使用 style 給出圖像的路徑,您可以使用 .bg-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%。

相關內容