css制作背景
CSS 背景设置方法
background-color
设置纯色背景，支持颜色名称、十六进制、RGB/RGBA等格式：
body {
background-color: #f0f0f0; /* 十六进制 */
background-color: rgba(255,0,0,0.3); /* 带透明度的红色 */
}background-image
使用图片作为背景，需配合url()函数：
div {
background-image: url("image.jpg");
background-repeat: no-repeat; /* 防止平铺 */
background-size: cover; /* 图片覆盖整个元素 */
}渐变背景
创建线性或径向渐变效果：
.gradient-bg {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
.radial-bg {
background: radial-gradient(circle, #3a7bd5, #00d2ff);
}背景定位与固定
控制背景图位置和滚动行为：
header {
background-position: center top; /* 水平居中，顶部对齐 */
background-attachment: fixed; /* 背景图固定不随滚动移动 */
}多背景层叠加
用逗号分隔多个背景属性实现叠加效果：
.multi-bg {
background:
url("pattern.png") repeat,
linear-gradient(to bottom, #fff, #000);
}实用技巧
- 使用
background-blend-mode混合多个背景层（如multiply/screen模式） - 通过
background-clip控制背景绘制区域（如text实现文字背景效果） - 响应式设计中建议使用
background-size: contain保持图片完整显示
注意：复杂背景可能影响页面性能，建议对大型图片进行压缩优化。
