制作css背景

CSS背景制作方法

使用background-color设置纯色背景 通过background-color属性可以快速设置元素的背景颜色，支持颜色名称、十六进制、RGB或HSL值。

div {
  background-color: #f0f0f0;
}

使用background-image添加图片背景 通过url()函数引入图片路径，可设置多张图片（逗号分隔），首张图片显示在最上层。

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

控制背景重复方式background-repeat 默认情况下背景图片会重复铺满，可通过以下值控制：

• repeat-x：水平重复
• repeat-y：垂直重复
• no-repeat：不重复
• space：等间距填充
• round：拉伸填充

调整背景大小background-size

• cover：完全覆盖容器（可能裁剪）
• contain：完整显示图片（可能留白）
• 具体数值：如background-size: 100px 200px

定位背景图片background-position 使用百分比、长度单位或关键词（left/right/center）定位：

header {
  background-position: right top;
}

创建渐变背景 使用linear-gradient()或radial-gradient()函数：

body {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
}

固定背景background-attachment

• scroll：随内容滚动（默认）
• fixed：固定视口位置
• local：随元素内容滚动

复合写法background 整合多个属性的简写形式（顺序任意）：

.banner {
  background: #333 url("banner.jpg") no-repeat center/cover;
}

多背景层叠加 通过逗号分隔多个背景定义，先定义的层在上方：

.hero {
  background: 
    url("overlay.png"),
    linear-gradient(to right, #ff758c, #ff7eb3);
}

使用CSS变量动态控制背景 结合CSS变量实现主题切换等动态效果：

:root {
  --main-bg: #ffffff;
}
.dark-theme {
  --main-bg: #222222;
}
.container {
  background-color: var(--main-bg);
}