CSS作為前端開發中重要的一部分，不僅可以使網頁頁面更加美觀、優雅，還可以為頁面添加炫酷的背景效果。下面我們就來介紹幾種常用的CSS背景效果。

/*背景顏色*/
body{
background-color: #F0F8FF;
}
/*背景圖片*/
body{
background-image: url("example.jpg");
background-repeat: no-repeat;
background-size: cover;
}
/*background-size有以下幾個值：
contain   //在保持圖片原始尺寸比例的情況下，將圖片自適應到容器中。
cover     //在保持圖片原始尺寸比例的情況下，將圖片鋪滿整個容器。
auto      //保持原始圖片大小。
*/
/*漸變背景*/
body{
background: linear-gradient(to right, #F0F8FF, #00BFFF);
}
/*radial-gradient是徑向漸變*/
body{
background: radial-gradient(circle, #F0F8FF, #00BFFF);
}
/*背景動畫*/
body{
background-image: url("example.jpg");
animation: slide 10s infinite linear;
}
@keyframes slide{
0% {background-position: 0 0;}
100% {background-position: 100% 0;}
}

通過上述代碼，我們可以輕松添加背景顏色、背景圖片、漸變背景及背景動畫等效果，讓網頁更加生動有趣。