css的背景效果 |css rgba 不透明度 兼容

/*背景颜色*/
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;}
}

通过上述代码，大家可以轻松添加背景颜色、背景图片、渐变背景及背景动画等效果，让网页更加生动有趣。