正在加载...

CSS 背景

你会给文字上色了。现在给背后的表面上色。背景填充元素的盒子——纯色、照片，以及稍后的渐变——文字仍用 color 叠在上面。

什么是 CSS 背景？

背景是画在元素内容后面的那一层（通常也在 padding 区域后面）。用一组属性控制：background-color、background-image、background-repeat、background-size、background-position，以及简写 background。渐变另有一课——今天是纯色填充与图片基础。

属性一览

先认清各自职责。第一天不必会全部关键字。

📊 日常 CSS 背景属性

属性 职责 日常起步
background-color 内容后方的纯色填充 background-color: #f1f5f9;
background-image 图片层（稍后也可是渐变） background-image: url("hero.jpg");
background-repeat 平铺或停止平铺 background-repeat: no-repeat;
background-size 在盒子内缩放图片 background-size: cover;
background-position 对齐图片 background-position: center;
background 合并多项的简写 background: #0f172a url("a.jpg") center / cover no-repeat;

用 background-color 做纯色填充

最简单的背景是纯色。用你已会的任意颜色值——命名色、hex、rgb 或 hsl。

卡片纯色背景

css
CSS Code 
.card {
background-color: #f1f5f9;
color: #0f172a;
padding: 1rem;
}

保持文字可读

给字母设 color，给盒子设 background-color。浅色填充需要更深文字；深色填充需要更浅文字。

用 background-image 放图片

用 url("…") 指向文件。路径相对 CSS 文件（或绝对 URL）。图片在内容后面——不是 HTML 流里的 <img>。

英雄区块背后的照片

css
CSS Code 
.hero {
background-image: url("hero.jpg");
color: white;
min-height: 12rem;
padding: 2rem;
}

图片 vs <img>

照片是内容时（alt、含义）用 <img>。是界面或区块后的装饰时用 background-image。

停下平铺：no-repeat + cover

默认许多浏览器会把小图平铺。英雄区关掉平铺，并用 cover 缩放，让照片铺满盒子。

铺满盒子的英雄图

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

一句话讲 cover

cover 放大到盒子填满——边缘可能被裁切。contain 放入整张图——可能出现空带。

对准焦点

background-position 决定照片哪一部分保持可见——当 cover 裁到脸或 logo 时很有用。

瞄准照片

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

简写（保持可读）

可以把多个值写进 background。学习时先分开写；熟悉顺序后再用简写。

紧凑的 background 简写

css
CSS Code 
.banner {
background: #0f172a url("banner.jpg") center / cover no-repeat;
color: #f8fafc;
padding: 2rem;
}

顺序提示

常见模式：颜色、图片、position / size、repeat。简写搞混了就拆回分开的属性——两者都合法。

自己动手

  1. .card 用 background-color: #f1f5f9 和深色 color 文字。
  2. .hero 用 background-image: url("…")、min-height 和浅色文字。
  3. 设置 background-repeat: no-repeat、background-size: cover、background-position: center。
  4. 把 position 改成 left center 或 right center，看框里留下什么。
  5. 可选：用 background 简写重写英雄区，并在 url() 前加备用色。

常见错误

  • 用 color 去填盒子——那只给字母上色
  • 忘记 no-repeat，logo 在整段平铺
  • 坏掉的 url("…") 路径（错文件夹或缺引号）
  • 巨大未压缩照片当地图背景——页面变慢
  • 纯色 + 一张图还没熟就跳复杂渐变（渐变在下一课）

小结

  • 背景画在内容后面；color 给文字上色
  • 纯色用 background-color；照片用 background-image
  • 用 no-repeat、cover/contain 与 position 控制照片
  • 简写可选——学习时清晰胜过炫技
  • 完整渐变配方留给下一课
  • 练一张灰卡片和一个照片英雄区，直到属性名记牢

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程