背景颜色与图像
使用 background-color 和 background-image 属性应用背景颜色和图像。
背景颜色与图像 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
background-color
background-color 属性会在元素后方设置纯色背景。它接受任何 CSS 颜色值，并且在背景图像的透明区域中可见。
<div class="hero">Hero section</div>
background-image
background-image 会将一个或多个图像设置为元素背景。图像会叠加在 background-color 上方。
<div class="banner">Banner (image missing → fallback color shows)</div>
background-size
background-size 控制图像尺寸。常用值包括：
cover— 填满区域，必要时裁剪图像contain— 完整适应区域内部，可能留下空隙100% 100%— 拉伸图像以完全填满区域
<div class="hero"></div>
background-position
background-position 设置图像的放置位置。您可以使用关键字、百分比值或长度值。
<div class="hero"></div>
background-repeat
默认情况下，图像会平铺。使用 background-repeat 控制平铺方式：
<div class="hero"></div>
<div class="pattern"></div>
background-attachment
background-attachment 决定图像是否随页面滚动。fixed 会产生类似视差的效果；scroll 是默认值。
<div class="spacer">Scroll down ↓</div>
<div class="parallax">Fixed background</div>
<div class="spacer">Scroll up ↑</div>
多个背景
CSS 支持多个以逗号分隔的背景图层。列表中最先写出的图层会显示在最上方。
<div class="card">Overlay + photo layers</div>
background 简写属性
background 简写属性可以在一条声明中组合所有背景属性。尺寸的书写顺序很重要：请将尺寸写在位置之后，并使用 / 分隔。
<div class="hero"></div>
背景裁剪和原点
background-clip 控制背景相对于盒模型的绘制范围。background-origin 设置定位时使用的参考点。
<div class="card">Clip & Origin</div>
文字背景裁剪
将 background-clip: text 与透明文字颜色结合使用，可以将背景图像或渐变裁剪为文字的形状。
<h1>Gradient Text</h1>
object-fit 对 <img> 与 background-image 的比较
对于 <img> 标签，请使用 object-fit: cover 和 object-position，而不是 background-image。这样可以将图像保留在 DOM 中，有利于无障碍访问和搜索引擎优化。
<img class="hero-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='800'><rect width='400' height='800' fill='%23ff6347'/><circle cx='200' cy='200' r='150' fill='%231e90ff'/></svg>" alt="hero" />
快速检查
哪一个 background-size 值会填满区域并裁剪图像，而不是留下空隙？
回顾
使用 background-color 作为图像下方的备用颜色。background-size: cover 是全宽主视觉图的首选方案。多个背景图层可以提供强大的合成功能。简写属性能够简洁地组合所有背景属性。
常见问题解答
「背景颜色与图像」课时是免费的吗？
是的 — 「背景颜色与图像」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「背景颜色与图像」这节课中我会学到什么？
使用 background-color 和 background-image 属性应用背景颜色和图像。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「背景颜色与图像」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。