<div背景全屏（Fullscreen Background）是一種常見的網頁設計技術，通過設置背景圖片或背景視頻來占滿整個屏幕，從而打造出豐富多樣的視覺效果。這種技術能夠提升網頁的美觀度和吸引力，使用戶在訪問網頁時能夠獲得更好的視覺體驗。
一個常見的用例是在網頁加載時，使用一張具有高分辨率的圖片作為背景，并將其完全呈現在屏幕上。這樣就能夠展示出圖片的細節和質感，使網頁看起來更加精美。實現這種效果的方式是通過CSS中的background-size和background-position屬性來設置圖片的寬度、高度和位置。
以下是一些示例代碼來演示如何使用div背景全屏技術實現各種視覺效果。
第一個示例是使用一張背景圖片實現全屏效果。，我們創建一個div元素，并給它設置一個唯一的ID作為選擇器。然后，在CSS中，通過設置該div元素的寬度和高度為100%來使其占滿整個屏幕。最后，使用background-image屬性來設置背景圖片的URL，并設置background-size為cover，這將自動調整圖片的大小以適應div元素。

<div id="fullscreen-image"></div>
<br>
<style>
#fullscreen-image {
width: 100%;
height: 100vh;
background-image: url('background.jpg');
background-size: cover;
}
</style>

第二個示例是使用背景視頻實現全屏效果。與使用背景圖片類似，我們也需要創建一個div元素，并設置寬度和高度為100%，同時設置background-size為cover。然而，這次我們將background-image屬性的值設置為視頻的URL，并使用HTML5的video標簽嵌入視頻。同樣地，設置背景視頻的寬度和高度為100%。

<div id="fullscreen-video">
<video autoplay loop muted>
<source src="background.mp4" type="video/mp4">
</video>
</div>
<br>
<style>
#fullscreen-video {
width: 100%;
height: 100vh;
background-image: url('background.mp4');
background-size: cover;
}
</style>

<div背景全屏技術可以使用在各種不同場景中。例如，你可以使用此技術來創建一個滾動標題的效果。假設有一個div元素包含一段文本，通過設置它的背景為漸變，并在CSS中利用animation屬性設定動畫效果。這將導致文本背景的顏色逐漸改變，就像滾動一樣。

<div id="fullscreen-scrolling-text">Hello, World!</div>
<br>
<style>
#fullscreen-scrolling-text {
width: 100%;
height: 100vh;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
background-size: 200% auto;
animation: scroll 10s linear infinite;
}
<br>
@keyframes scroll {
0% {
background-position: 0% center;
}
100% {
background-position: 100% center;
}
}
</style>

來說，div背景全屏是一種常見的網頁設計技術，通過設置背景圖片或背景視頻來占滿整個屏幕，從而打造出豐富多樣的視覺效果。無論是使用圖片、視頻還是其他背景樣式，掌握這種技術能夠幫助我們創建出更具吸引力的網頁，提升用戶體驗。通過上述示例代碼，你可以開始探索和應用這些效果，為你的網頁增添一份獨特的魅力。