HTML5是現代網頁開發的重要標準之一，其中背景圖輪播是網頁設計中常用的一個功能。本文將介紹如何使用HTML5實現背景圖輪播。示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5背景圖輪播</title>
<style>
.bg-container {
position: relative;
height: 400px;
}
.bg-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 1s ease-in-out;
}
</style>
</head>
<body>
<div class="bg-container">
<img src="img/bg-1.jpg">
<img src="img/bg-2.jpg">
<img src="img/bg-3.jpg">
</div>
<script>
let images = document.querySelectorAll(".bg-container img");
let current = 0;
setInterval(function() {
images[current].style.opacity = 0;
current = (current + 1) % images.length;
images[current].style.opacity = 1;
}, 5000);
</script>
</body>
</html>代碼分解如下：首先，創建一個包含背景圖的容器，將容器設置為相對定位（position: relative;)，高度設置為400像素（height: 400px;)。在容器中添加三個img元素，用于放置三張背景圖。為了使圖片全屏，并且不變形（object-fit: cover;)，將圖片設置為絕對定位(position: absolute;)，并將寬度和高度設置為100%。
接下來，使用JavaScript實現輪播效果。首先，使用querySelectorAll方法查找所有圖片，將它們存儲在一個數組中。在設置一個變量current，用于表示當前顯示的圖片的下標。
然后，使用setInterval函數定時執行一個回調函數。每隔五秒，將當前圖片的透明度設置為0（images[current].style.opacity = 0;)，然后將變量current更新為(current + 1) % images.length，即下一張圖片的下標。最后，將新的圖片的透明度設置為1（images[current].style.opacity = 1;)，以顯示新的圖片。
在HTML5中，我們可以使用這種簡單的方法實現背景圖輪播效果，以增強網頁的視覺吸引力和用戶體驗。