今天我们来学一下如何使用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背景的几种方法。当然,你也可以根据自己的需求进行更多的探索!