css制作背景

CSS 背景设置方法

背景颜色
使用 background-color 属性设置纯色背景，支持颜色名称、十六进制、RGB 或 HSL 值。

body {
  background-color: #f0f0f0; /* 浅灰色 */
}

背景图片
通过 background-image 添加图片，结合 url() 指定路径。

div {
  background-image: url("image.jpg");
}

背景重复控制
使用 background-repeat 调整图片平铺方式：

• repeat（默认，双向平铺）
• no-repeat（不重复）
• repeat-x（水平重复）
• repeat-y（垂直重复）

背景尺寸
background-size 定义图片大小：

• cover（覆盖整个元素，可能裁剪）
• contain（完整显示，可能留白）
• 具体数值（如 100px 200px）

背景位置
background-position 控制图片起始位置，支持关键词（top、center）或坐标值：

header {
  background-position: right bottom;
}

渐变背景
使用 linear-gradient 或 radial-gradient 创建渐变效果：

section {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

多背景叠加
通过逗号分隔多个背景属性实现叠加：

.hero {
  background: 
    url("pattern.png") repeat,
    linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

背景固定
background-attachment: fixed 使背景相对于视口固定，滚动内容时背景不动。

复合简写
background 属性可合并多个设置：

footer {
  background: #333 url("bg.png") no-repeat center/cover fixed;
}