div 圖片鋪滿是一種常見的網頁設計技巧，通過設置 div 元素的背景圖片來實現圖片完全鋪滿整個 div 區域。這樣的效果可以為網頁增加視覺吸引力，提升用戶體驗。本文將通過幾個代碼案例詳細解釋如何實現 div 圖片鋪滿的效果，并參考其他文章的真實案例來加深理解。
，我們需要在 HTML 文件中創建一個 div 元素。通過設置 div 元素的樣式，我們可以修改其尺寸、位置和背景圖片。
下面是一個簡單的案例，通過 CSS 設置 div 元素的背景圖片并使其鋪滿整個 div 區域：

案例一：

<style>
.full-bg {
width: 500px;
height: 300px;
background-image: url(image.jpg);
background-size: cover;
}
</style>
<br>
  <div class="full-bg"></div>

在這個案例中，我們創建了一個名為 full-bg 的類，并將其應用于 div 元素。通過設置 width 和 height 屬性，我們定義了 div 元素的尺寸為 500 像素寬和 300 像素高。通過設置 background-image 屬性并指定圖片的 URL，我們將圖片作為 div 元素的背景圖。最后，通過 background-size 屬性設置為 cover，保證背景圖片完全鋪滿整個 div 區域。
接下來，我們將介紹在移動設備上如何實現 div 圖片鋪滿的效果。

案例二：

<style>
.full-bg {
width: 100%;
height: 100vh;
background-image: url(image.jpg);
background-size: cover;
background-position: center;
}
</style>
<br>
  <div class="full-bg"></div>

在這個案例中，我們設置了 div 元素的寬度為 100%，并通過 height 屬性和 100vh 單位設置 div 元素的高度為視口高度的百分比。這樣可以確保在移動設備上，div 圖片鋪滿整個屏幕。通過設置 background-position 屬性為 center，可以使背景圖片在 div 區域居中顯示。
除了使用 CSS，我們還可以使用 JavaScript 來實現 div 圖片鋪滿的效果。

案例三：

<style>
.full-bg {
width: 500px;
height: 300px;
}
</style>
<br>
  <div class="full-bg" id="fullBg"></div>
<br>
  <script>
window.addEventListener('DOMContentLoaded', function() {
var fullBg = document.getElementById('fullBg');
fullBg.style.backgroundImage = 'url(image.jpg)';
fullBg.style.backgroundSize = 'cover';
});
</script>

在這個案例中，我們使用 JavaScript 在頁面加載完成后修改 div 元素的樣式。，我們需要獲取到 div 元素的引用，這里我們通過 getElementById 方法獲取到 id 為 fullBg 的 div 元素。然后，通過設置元素的 style.backgroundImage 和 style.backgroundSize 屬性，實現背景圖片的鋪滿效果。
通過以上幾個案例，我們了解了如何使用 CSS 和 JavaScript 實現 div 圖片鋪滿效果。而在實際開發中，我們可以根據具體需求和設計要求來調整代碼，并且可以結合其他 CSS 屬性或 JavaScript 功能來進一步增強效果。