<div>背景100% 是一種CSS屬性值，用于設置一個元素的背景圖像在水平和垂直方向上都完全填充其容器。通過使用<div>標簽和背景100%屬性，我們可以創建出具有全屏背景圖的元素，為網頁增添視覺效果和吸引力。</div>

讓我們來看幾個代碼案例，以更詳細地了解如何使用<div>背景100%。

案例一：單個<div>元素的全屏背景圖

下面的CSS代碼示例展示了如何使用<div>背景100%來實現單個元素的全屏背景圖。我們指定了一個100%的高度和寬度，并設置背景圖像的URL。然后，我們使用背景尺寸屬性(background-size)將背景圖像調整為完全填充元素。

div {
height: 100%;
width: 100%;
background-image: url('background-image.jpg');
background-size: 100% 100%;
}

案例二：<div>背景100%與混合模式

下面的CSS代碼示例展示了如何使用<div>背景100%結合CSS混合模式，創建一個獨特的背景效果。我們設置了一個帶有背景圖像的<div>元素，并使用背景混合模式屬性(background-blend-mode)將其與背景顏色混合。這樣可以創建出近乎自定義的視覺特效。

div {
height: 100%;
width: 100%;
background-image: url('background-image.jpg');
background-size: 100% 100%;
background-color: #007bff;
background-blend-mode: multiply;
}

案例三：使用媒體查詢調整<div>元素的背景圖像

下面的CSS代碼示例展示了如何使用媒體查詢來根據不同的屏幕尺寸，調整<div>元素的背景圖像。我們定義了兩個媒體查詢，根據不同的條件設置相應的背景圖像和背景大小屬性。這樣，無論是在大屏幕上還是在移動設備上，我們都能夠提供適合不同屏幕尺寸的背景圖像。

div {
height: 100%;
width: 100%;
background-image: url('background-image-large.jpg');
background-size: 100% 100%;
}
<br>
@media only screen and (max-width: 768px) {
div {
background-image: url('background-image-small.jpg');
background-size: cover;
}
}

通過以上案例，我們可以看到使用<div>背景100%能夠輕松實現全屏背景圖效果，并結合其他CSS屬性和媒體查詢，可以為這些背景圖像增加更多的樣式和效果。無論是在設計網頁還是開發應用程序時，使用<div>背景100%都是一個非常有用的技巧。