CSS 背景

网站

CSS 背景

background | MDN

引入

背景是 CSS 中很常用的样式。

它可以给元素添加背景颜色、背景图片、渐变背景，也可以控制背景图片的位置、大小和是否重复。

正文

定义

定义

CSS 背景用于控制元素内容区域后面的显示效果，常见内容包括背景颜色、背景图片和背景渐变。

背景不会改变 HTML 的内容结构，只会改变元素背后的视觉效果。

语法

常见写法：

选择器 {
  background-color: 颜色值;
}

也可以使用 background 简写属性：

选择器 {
  background: 背景颜色 背景图片 背景重复 背景位置 / 背景大小;
}

实际写代码时，初学阶段更建议先分开写，方便理解每个属性的作用。

常见属性

属性	作用
background-color	设置背景颜色
background-image	设置背景图片或渐变
background-repeat	控制背景图片是否重复
background-size	控制背景图片大小
background-position	控制背景图片位置
background-attachment	控制背景图片是否跟随页面滚动
background	背景相关属性的简写

背景颜色

background-color 用于设置元素的背景颜色。

.box {
  background-color: #f3f4f6;
}

背景颜色常用于页面区域、卡片、按钮、提示框等地方。

背景图片

background-image 用于设置背景图片。

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

url() 中写图片路径。

背景图片只是装饰，不会像 <img> 一样表达页面内容。

如果图片本身是重要内容，应该优先使用 <img>，并写好 alt。

背景重复

默认情况下，背景图片会重复平铺。

可以使用 background-repeat 控制重复方式。

.hero {
  background-image: url("banner.jpg");
  background-repeat: no-repeat;
}

常见值：

值	作用
repeat	默认值，水平和垂直方向都重复
no-repeat	不重复
repeat-x	只在水平方向重复
repeat-y	只在垂直方向重复

背景大小

background-size 用于控制背景图片的显示大小。

.hero {
  background-image: url("banner.jpg");
  background-size: cover;
}

常见值：

值	作用
auto	默认值，保持图片原始大小
cover	覆盖整个元素，可能会裁剪图片
contain	完整显示图片，可能会留空白
100% 100%	拉伸到元素宽高，可能会变形

cover 很常用于页面头图、卡片封面和大背景图。

背景位置

background-position 用于控制背景图片的位置。

.hero {
  background-image: url("banner.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

常见值：

• center：居中
• top：靠上
• bottom：靠下
• left：靠左
• right：靠右
• center top：水平居中，垂直靠上

背景固定

background-attachment 用于指定背景图片是跟随内容滚动，还是固定在视口中。

.section {
  background-image: url("bg.jpg");
  background-attachment: fixed;
}

常见值：

值	作用
scroll	默认值，背景图像随元素滚动
fixed	背景图像固定在视口中
local	背景图像随元素内容滚动

fixed 可以做出背景固定、内容滚动的效果，但在移动端兼容性可能不稳定。

背景渐变

渐变也可以作为背景图片使用。

常见线性渐变写法：

.banner {
  background: linear-gradient(to right, #2563eb, #9333ea);
}

这里表示颜色从左到右，由蓝色逐渐变成紫色。

基础语法：

background: linear-gradient(方向, 颜色1, 颜色2);

也可以使用角度：

.banner {
  background: linear-gradient(135deg, #f97316, #ef4444);
}

径向渐变

radial-gradient() 可以创建从中心向外辐射的渐变效果。

.box {
  background-image: radial-gradient(circle, #4e886a, transparent);
}

基础语法：

background-image: radial-gradient(形状 大小 at 位置, 颜色1, 颜色2, ...);

• 形状：circle（圆形）或 ellipse（椭圆，默认值）
• 位置：用 at x y 指定圆心位置，如 at 20% 50%、at center
• 颜色：可以写多个颜色节点，支持 rgba 和 transparent

也可以使用带透明度的径向渐变来营造柔光氛围：

.hero {
  background-image: radial-gradient(circle at 20% 50%, rgba(78, 136, 106, 0.2) 0%, transparent 50%);
}

这里 circle at 20% 50% 表示圆形渐变，圆心在元素水平 20%、垂直 50% 处，从半透明绿色逐渐过渡到完全透明。

多层背景叠加

background-image 支持同时设置多个背景层，用逗号分隔，先写的在上层。

.hero {
  background-image:
    radial-gradient(circle at 20% 50%, rgba(78, 136, 106, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(78, 136, 106, 0.2) 0%, transparent 50%);
}

这里叠加了两层径向渐变，分别在不同位置产生柔光效果，两层光晕会自然融合。

多层背景也适用于图片与渐变叠加：

.hero {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("banner.jpg");
  background-size: cover;
}

这个写法在图片上覆盖了一层半透明黑色，常用于压暗背景图以便文字阅读。

简写属性

background 可以把多个背景属性写在一起。

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

这个写法相当于：

.hero {
  background-image: url("banner.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

注意：在简写中，如果同时写 background-position 和 background-size，中间要用 / 分开。

例子

设置卡片背景色

<div class="card">卡片内容</div>

.card {
  background-color: #ffffff;
}

这个例子中，卡片背景是白色。

设置页面头图背景

<section class="hero">
  <h1>欢迎访问我的网站</h1>
</section>

.hero {
  background-image: url("hero.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

这个例子中，.hero 使用图片作为背景，并让图片铺满整个区域。

添加渐变按钮背景

<button class="btn">提交</button>

.btn {
  background: linear-gradient(to right, #22c55e, #16a34a);
  color: white;
}

这个按钮背景从浅绿色渐变到深绿色。

特点

• 背景可以是颜色、图片或渐变
• 渐变包括 linear-gradient（线性渐变）和 radial-gradient（径向渐变）
• background-color 设置背景颜色
• background-image 设置背景图片或渐变，支持逗号分隔写入多层背景
• 背景图片默认会重复平铺
• background-size: cover; 常用于让背景图铺满区域
• background-position: center; 常用于让背景图居中显示
• background 是简写属性，写法更短，但初学时容易混淆
• 背景图偏装饰，重要图片内容更适合用 <img>

注意事项

• 背景图片不会撑开元素高度，元素本身需要有内容或设置高度
• 背景图片没有 alt，所以不要用它承载必须被理解的信息
• 文字放在背景图上时，要注意颜色对比度
• 使用 cover 时，图片可能会被裁剪
• 使用 contain 时，图片可能不会铺满整个区域
• 简写 background 可能会重置之前设置过的背景属性

理解

可以把背景理解为元素后面的一层“底色”或“底图”。

HTML 负责放内容，CSS 背景负责让内容所在的区域更有视觉层次。

背景适合做装饰、分区和氛围，但不适合承载重要信息。

如果用户必须看到并理解某张图片，那它更应该是 <img>，而不是背景图。

引出

理解了背景之后，可以继续学习 CSS 图像，区分背景图片和真正的内容图片。