HTML5是一個全新的網頁開發技術，可以幫助開發者更好地設計和制作網站。HTML5提供了很多強大的特性，包括新的標簽、屬性和API，可以讓網站更加互動、響應式和富有創意性。而其中最有趣的特性就是HTML5背景代碼。

HTML5背景代碼可以讓開發者設計獨特的背景效果，讓網站更加吸引人。在這里，我們提供了一些HTML5背景代碼大全，供大家參考和使用。

/* 1. 純色背景 */
body {
background-color: #92a8d1;
}
/* 2. 漸變背景 */
body {
background: linear-gradient(to bottom, #92a8d1 0%, #034f84 100%);
}
/* 3. 帶圖背景 */
body {
background-image: url("img/bg.jpg");
background-repeat: no-repeat;
background-size: cover;
}
/* 4. 動態漸變背景 */
body {
background: linear-gradient(to bottom, #fa709a 0%, #fee140 50%, #74ebd5 100%);
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* 5. 背景視頻 */
body {
background: url("img/bg-video.jpg");
background-size: cover;
}
#video-background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -100;
}
#video-background video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
object-fit: cover;
opacity: 0.7;
}
/* 6. 線條動畫背景 */
body {
background-color: #141e30;
}
#background-animation {
width: 100%;
height: 100%;
z-index: -1;
position: fixed;
top: 0;
left: 0;
}
#background-animation .bg-line {
position: absolute;
width: 100%;
height: 2px;
background-color: #1f7a8c;
top: 50%;
animation: move 5s linear infinite;
}
#background-animation .bg-line:nth-child(2) {
animation-delay: 0.2s;
}
#background-animation .bg-line:nth-child(3) {
animation-delay: 0.4s;
}
#background-animation .bg-line:nth-child(4) {
animation-delay: 0.6s;
}
#background-animation .bg-line:nth-child(5) {
animation-delay: 0.8s;
}
@keyframes move {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}

以上是一些常見的HTML5背景代碼，希望能對您的網站設計提供幫助。