今天我们来学一下如何使用CSS制作网页背景!CSS背景可以让你的网站变得更加富有吸引力。下面是一份制作教学视频,让我们来一起学习吧!
<code> /* 创建一个默认背景 */
body {
background-color: #f0f0f0;
/* 设置背景颜色 */
}
/* 添加背景图片 */
body {
background-image: url('img/background.jpg');
/* 添加图片背景 */
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
/* 保证背景图不随滚动而移动 */
}
/* 背景渐变 */
body {
background: linear-gradient(to right, #f0f0f0, #ffffff);
/* 横向渐变 */
}
/* 背景动画 */
body {
background: linear-gradient(to right, #f0f0f0, #ffffff);
background-size: 400% 400%;
/* 定义一个400%的背景大小 */
animation: gradient 20s ease infinite;
/* 20秒渐变循环 */
}
@keyframes gradient {
0% {
background-position: 0% 50%;
/* 左侧为原始颜色 */
}
50% {
background-position: 100% 50%;
/* 右侧为第二个颜色 */
}
100% {
background-position: 0% 50%;
/* 回到原位置 */
}
}
以上就是制作CSS背景的几种方法。当然,你也可以根据自己的需求进行更多的探索!

