css背景制作教程
纯色背景设置
通过background-color属性可快速设置纯色背景，支持颜色名称、十六进制、RGB或HSL值。
body {
background-color: #f0f8ff; /* 天蓝色 */
}
div {
background-color: rgba(255, 165, 0, 0.5); /* 半透明橙色 */
}渐变背景实现
使用linear-gradient或radial-gradient创建线性或径向渐变。
.header {
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
}
.card {
background: radial-gradient(circle, #a1c4fd, #c2e9fb);
}图片背景应用
通过background-image添加图片，结合background-size和background-repeat控制显示。
.banner {
background-image: url("image.jpg");
background-size: cover; /* 完全覆盖容器 */
background-repeat: no-repeat;
background-position: center;
}多背景层叠加
CSS3支持多个背景层叠加，用逗号分隔不同属性值。
.hero-section {
background:
linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
url("hero-bg.jpg") center/cover;
}动态背景效果
结合动画或伪元素实现动态背景。
@keyframes pulse {
0% { background-color: #ff6b6b; }
50% { background-color: #4ecdc4; }
100% { background-color: #ff6b6b; }
}
.animated-bg {
animation: pulse 5s infinite;
}背景混合模式
使用background-blend-mode实现颜色与图片的混合效果。
.blend-mode {
background-image: url("texture.png");
background-color: #3a7bd5;
background-blend-mode: overlay;
}
