8 / 20

背景 | 自在学

背景

在CSS中，元素的背景区域默认包含了内容区域、内边距区域和边框区域，而边框会绘制在背景的上方。这种默认行为可以通过CSS进行调整，这也是我们在本节课中要探讨的内容

CSS允许你为元素设置背景，这包括纯色或半透明的颜色、一张或多张背景图片，甚至是你自己定义的各种形状的渐变色彩。这些背景样式为网页设计提供了丰富的视觉表现手段，能够创造出从简单到复杂的各种视觉效果。

实验室

设置背景颜色

要为元素设置背景颜色，我们可以使用 background-color 属性。这个属性接受任何有效的颜色值，无论是十六进制表示法、RGB颜色、HSL颜色，还是CSS颜色关键字都可以使用。

background-color 属性的初始值是 transparent，这意味着默认情况下元素的背景是透明的。这个属性可以被应用到所有元素上，从 <body> 元素到内联元素如 <em> 和 <a> 都可以使用。需要注意的是，background-color 的值不会被继承，每个元素都需要单独设置自己的背景颜色。

如果你希望背景颜色不仅仅局限于内容区域，而是向外延伸一些，可以通过添加内边距来实现。内边距会让背景颜色扩展到内容区域之外，从而创造出更大的背景显示区域。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    .intro-section {
      background-color: #e8f4f8;
      margin-bottom: 1rem;
    }
    
    .intro-section.with-padding {
      background-color: #e8f4f8;
      padding: 2rem;

理解背景不继承这个特性很重要。虽然元素的背景颜色默认是透明的，但这并不意味着元素继承了父元素的背景颜色，而是说背景是透明的，因此我们可以看到父元素的背景“穿透”过来。这就好比一块透明的玻璃板贴在墙上，我们仍然能看到墙面的纹理，但那不是玻璃板的背景，而是墙面的背景。在CSS中也是如此，如果我们为页面设置了背景，这个背景可以透过所有没有设置自己背景的子元素显示出来。

显式设置透明背景

大多数情况下，我们不需要显式地设置 background-color: transparent，因为这已经是默认值了。但在某些特殊场景中，显式设置透明背景会很有用。

想象一下这样的场景：你引入的第三方脚本将所有的图片元素都设置为白色背景，但你的设计中包含了一些透明背景的PNG图片，你希望这些图片保持透明效果而不是显示白色背景。为了确保你的设计意图得以实现，你可以显式地为这些图片设置透明背景。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 第三方脚本可能设置了这样的规则 */
    img {
      background-color: white;
    }
 
    /* 覆盖特定图片的背景为透明 */
    .transparent-logo {
      background-color: transparent;
    }
  </style>
</head>

确保文本与背景之间具有充足的对比度对于可访问性至关重要。对比度不足会严重影响文字的可读性，尤其是在视觉显示多样化的环境下。根据无障碍设计标准，建议正文小字体的对比度不低于4.5:1，标题等较大字号的对比度不低于3:1。高标准的可访问性设计不仅要追求视觉美观，更应优先保障内容的清晰易读。

在根元素（如 <body> 或 <html>）上同时指定文本颜色和背景颜色，是推荐的最佳实践。这有助于为整个页面奠定统一的配色基调，并确保无论用户或浏览器如何调整默认设置，页面都能保持良好的可读性。如果仅设置了字体颜色而未指定背景色，CSS 校验工具通常会发出警告，提示可能存在可用性问题。需要注意的是，这类警告不会导致样式失效，仅用于提醒开发者改善代码质量，只有语法错误才会阻止样式生效。

背景色与前景色的协同

通过灵活组合 color 和 background-color 属性，可以实现丰富且易读性强的视觉效果。例如，为标题设置亮色字体并搭配深色背景，可有效突出内容层级，并形成强烈的视觉对比，从而提升页面的可阅读性和美观度。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 反色标题效果 */
    .hero-title {
      color: white;
      background-color: #2c3e50;
      padding: 1.5rem;
      font-family: "Microsoft YaHei", sans-serif;
      text-align: center

当我们为替换元素（如图片）设置背景时，会出现一些有趣的效果。对于本身具有透明区域的图片格式（如PNG或WebP），我们已经知道背景颜色会显示在透明区域中。但假设你想要为一个不透明的JPEG图片创建一个双色边框效果，可以通过添加背景颜色和少量内边距来实现。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    .decorative-image {
      background-color: #ff6b6b;
      padding: 8px;
      border: 3px solid #4ecdc4;
    }
  </style>
</head>

从原理上来看，CSS 背景颜色默认会铺满元素的整个背景区域，也就是内容、内边距和边框以内的全部空间。不过，如果边框是实心且不透明的，我们通常看不到覆盖在边框下方的背景色。示例中设置了 8 像素的内边距（padding），这样背景颜色会出现在图片与边框之间，形成一圈“内边框”般的高亮效果。这个技巧还能用来实现更复杂的视觉样式，比如通过添加 box-shadow 或背景渐变来丰富你的设计，我们后面会学到的，不必担心现在不会用。

裁剪背景区域

当我们给替换元素（如图片）添加背景时，背景颜色会出现在图片有透明像素的地方。默认情况下，背景会扩展到元素边框的外边缘，也就是说，如果边框部分是透明、半透明，或者采用点线、虚线、双线等带“空隙”的样式，背景颜色就会透过这些部分显示出来。如果你希望背景只显示在元素本体，不要延伸到边框后面，可以用 background-clip 属性来控制。background-clip 用于规定背景实际绘制的区域范围。

border-box（默认值）：背景扩展到包含边框的最外层区域，即背景也会绘制在边框下面。
padding-box：背景只绘制到内边距（padding）区域的边缘，不会出现在边框下方。
content-box：背景仅绘制到内容区域，内边距和边框区域不会出现背景色。

合理设置 background-clip ，可以让你的背景区域更符合设计需求，也能避免因边框透明而产生的视觉穿透现象。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    .clip-example {
      color: #1a5490;
      background: #c8d6e5;
      padding: 1.5rem;
      border: 0.5rem dashed #5f27cd;
      margin-bottom: 1

虽然 background-clip 的取值表面上并不复杂，但在实际使用中有几个关键点需要特别注意。

首先，background-clip 对根元素（即 <html> 或 <body>，取决于你背景设置在谁身上）是不会生效的。这是因为根元素的背景渲染行为与普通元素不同，规范明确规定了它的特殊处理方式，所以无法通过 background-clip 控制背景在根元素上的裁剪区域。

其次，如果元素存在圆角（即你设置了 border-radius），背景的显示范围会受到双重裁剪——不仅受到 background-clip 的影响，同时也会被圆角进一步限制。这很符合我们的直觉：当元素边角变圆时，背景也应被相应圆角“切掉”，而不是仍然以直角边界显示。换句话说，background-clip 决定了背景的基础裁剪区域，然后再根据元素的圆角进一步裁剪。

另外需要注意，background-clip 的表现还可能和 background-repeat 的设置方式发生联动，特别是在使用一些特殊的重复模式时，会造成一些意料之外的效果，这一点我们会在后文专门讲解。

最后，background-clip 只是用来限定背景的显示区域，对背景的其他属性（比如位置、平铺和缩放等）没有直接影响。对于纯色填充来说，这种差异感知不明显；而当你使用背景图片时，裁剪区域的不同就会对实际视觉效果产生很大影响。

文字裁剪效果

background-clip 还提供了一个非常实用的特殊值——text。当你将 background-clip 设置为 text 时，背景只会显示在文字本身被“覆盖”的区域，而元素的其他部分背景变为透明。这让我们可以很容易地用渐变、图片等样式为文字创造独特的肌理和视觉效果。

实现文字背景裁剪，需要把元素的前景色（即 text color）设置为透明，否则文字本身的颜色会盖住背景。我们看一下下面这个例子：

|
<!DOCTYPE html>
<html>
<head>
  <style>
    .text-clip-base {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 0 1.5rem;
      margin: 1.5rem

在第一个示例中，文字颜色被设置为完全透明，此时紫色的渐变背景会仅在文字轮廓区域显示出来，实现背景通过文字“镂空”显示的视觉效果。需要注意的是，对于图片等替换元素，前景色无法像文本那样设置为透明，因此这种背景裁剪效果仅适用于文本内容。

在第二个示例中，文字前景色采用了半透明的红色（rgba(255, 0, 0, 0.5)）。这样一来，文字实际效果就是红色与背景的紫色渐变叠加，从而形成紫红色的混合视觉。而文字周围的边框部分，则因为半透明红色与白色页面背景叠加，看起来会变为淡红色。

至于第三个示例，前景色为完全不透明的红色。此时无论是文字还是边框部分，都会被纯红色完全覆盖，底下的蓝紫渐变背景不会被看到。虽然背景依然被裁剪到文字区域，但由于前景色完全遮挡，背景的效果不会显现。

“背景裁剪到文字”技巧不仅适用于渐变色，也可以和图片背景结合使用，为设计带来更丰富的表现，有关背景图片的内容将在后文详细讲解。不过要特别注意：如果因为浏览器兼容性或其他原因导致背景无法正常绘制在文字下方，那么那些本应依赖透明文字显示背景的内容就会变得不可见，影响可读性。

并不是所有主流浏览器都完整支持 background-clip: text。比如，在基于 Blink 引擎的浏览器（如 Chrome、Edge）中需要加上 -webkit- 前缀，即 -webkit-background-clip: text。

使用背景图片

在掌握了背景颜色的基本知识后，我们继续了解背景图片的应用。背景图片可以为网页带来更丰富、更灵活的视觉表现，无论是作为装饰还是用于主内容区域，都能帮助设计师实现个性化和美观的效果。

为元素添加背景图片时，需要用到 background-image 属性。它的默认值是 none，也就是说如果不主动设置，页面元素不会显示任何背景图片。若希望某个区域有背景图片，必须为该属性指定图片地址。

background-image 接受多种类型的取值，包括图片 URL、线性渐变、径向渐变、圆锥渐变等等。当指定图片路径时，尤其要注意相对路径是以样式表本身的位置为基准，而不是 HTML 文件的位置，这一点在实际开发时很容易误解，要格外小心。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 基础背景图片设置 */
    .hero-banner {
      background-image: url('images/banner.jpg');
    }
 
    /* 由于默认值，图片会平铺重复 */
    /* 稍后我们会学习如何控制重复 */
  </style>
</head>
<body>
  <div

背景图片可以被应用到任何元素上，无论是块级元素还是内联元素。如果你有多个背景图片，可以用逗号分隔它们。这样就能够在同一个元素上叠加多个背景图片，创造出更复杂的视觉效果。

通过将简单的图标与创意属性选择器结合使用，我们可以为不同类型的链接添加不同的背景图标。比如，可以使用以下方式来标记指向PDF文档、Word文档或邮箱地址的链接。

|
/* 为所有链接添加左内边距，为图标留出空间 */
a[href] {
  padding-left: 1.5em;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1em 1em;
}
 
/* PDF链接图标 */
a[href$=".pdf"] {
  background-image: url(

在一个元素上可以设置多张背景图片，不过在你完全理解如何单独控制每一张图片的位置和重复方式之前，通常不建议这么做。我们会在后面讲完相关属性后，再系统介绍如何管理多重背景图片的排列和重复。

为什么背景属性不继承？

你可能注意到，CSS 中的背景属性（如 background 或 background-image）默认并不会被子元素继承，这其实是有充分理由的。背景图片正好可以说明如果允许继承会带来哪些问题。

举个例子：假如背景图片默认继承，给 <body> 设置了一个背景图，那么页面内的每一个元素——包括段落、标题、链接、甚至内联标签——都会各自重新从自身的左上角开始平铺同一张图片。这样一来，每个元素内部都会重新“复制”一份背景，导致整个页面看起来极为混乱、不符合设计预期。

正是为避免这种情况，CSS 规范明确规定背景相关属性不会被继承。如果你真的有特殊需求（尽管这种情况极为罕见），也可以用通配选择器为所有元素单独指定背景图片，或者通过 inherit 关键字让子元素显式继承父元素的背景属性。

|
/* 如果背景可以继承，会是这样的效果 */
body {
  background-image: url('pattern.png');
}
 
/* 或者显式继承 */
body {
  background-image: url('pattern.png');
}
 
* {
  background-image: inherit;
}

和 background-color 一样，background-image 也不会继承父元素的设定。其实，所有背景相关的 CSS 属性默认都是不会继承的。这么设计的原因，是为了让每个元素都能独立设置自己的背景效果，不会因为父元素的背景干扰到子元素的显示，保证了背景样式的灵活性和可控性。

背景图片的实用规范

为元素设置背景图片时，有一些必须遵循的专业建议，这不仅能让网页更美观，还能提升无障碍体验和用户的实际感受。

首先需要知道，背景图片会叠加在你设置的背景颜色上方。如果你的图片没有完全覆盖或者带有透明（或半透明）区域，底下的背景色就会透出来，与图片叠加，形成柔和的视觉效果。另外，如果背景图片由于网络等原因加载失败，浏览器也会显示你设置的背景颜色作为兜底。因此，专业做法是：每次用 background-image 时，也要搭配设置一个合适的背景色。这样一来，就算图片加载不出来，页面的可读性也不会受影响，用户体验更加可靠。

|
/* 良好的实践：同时设置背景颜色和图片 */
.content-section {
  background-color: #f5f5f5;
  background-image: url('texture.png');
  padding: 2rem;
}
 
/* 如果图片加载失败，背景颜色会显示出来 */

在使用背景图片时，容易出现可访问性方面的问题。比如，你给页面加上一张蓝天的背景图片，并用深色文字显示内容，这在大多数情况下是清晰可读的。但如果天空中有一只鸟，恰好深色文字落在鸟的暗色区域，文字就可能变得难以辨认。为了解决这一常见问题，可以在文字下方添加半透明背景色，或者给文字应用阴影效果。这样一来，无论背景图片如何变化，都能明显提升文字的可读性，避免信息丢失。

在设计带有背景图片的页面时，请始终关注文字内容的易读性。如果背景图案可能干扰到文字的识别，建议加上文字阴影或者半透明遮罩层来增强对比度。

定位背景图片

我们已经学习了如何为元素添加背景图片，那么如何让这张图片出现在我们想要的位置呢？这就要用到 background-position 属性了。该属性可以灵活地控制背景图片在元素背景中的具体位置。

background-position 的默认值是 0% 0%，也就是 top left，即背景图片默认会从元素的左上角开始显示。这个属性既适用于块级元素，也适用于替换元素。它允许你用绝对长度、百分比或者关键字来精确指定图片的起始定位，还可以通过动画效果实现动态移动背景。

每个设置了背景图片的元素，背景始终来源于一张“原始图片”（origin image）。图片在背景中的位置完全由 background-position 控制。该属性支持多种赋值方式，包括关键词（如 top、bottom、left、right、center），也支持具体的长度（如 50px、2cm），还可以用百分比（如 43%），并且这些值可以组合使用。不同的值类型，会产生略有不同的定位效果。

|
/* 在body元素中居中显示背景图片 */
.centered-background {
  background-image: url('logo.png');
  background-repeat: no-repeat;
  background-position: center;
}

使用关键词定位

使用关键词来定位背景图片是最直观的方式。关键词的含义与它们的名称相符，比如 top right 会让原始图片定位在元素背景的右上角。

|
.article-header {
  background-image: url('icon.png');
  background-repeat: no-repeat;
  background-position: top right;
}

定位关键词可以以任意顺序出现，只要不超过两个关键词——一个用于水平方向，一个用于垂直方向。如果你使用了两个水平方向的关键词（如 right right）或两个垂直方向的关键词（如 top top），整个值都会被忽略。

如果只提供了一个关键词，另一个方向会被假设为 center。所以如果你想让图片出现在每个段落的顶部中央，只需要这样声明：

|
.section-title {
  background-image: url('badge.png');
  background-repeat: no-repeat;
  background-position: top; /* 等同于 'top center' */
}

使用百分比值定位

百分比值与关键词密切相关，但它们的表现方式更加精细。假设你想通过百分比值将原始图片居中显示，这很简单：

|
.hero-section {
  background-image: url('banner.jpg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

这样设置会让原始图片的中心点对齐到元素背景的中心点。换句话说，百分比值同时应用于元素和原始图片。图片中距离顶部50%、距离左侧50%的像素点会被放置到元素背景中距离顶部50%、距离左侧50%的位置上。

当我们将原始图片居中显示时，图片中可以用 50% 50% 描述的点（即中心点）会对齐到背景中可以用同样方式描述的点。如果将图片设置为 0% 0%，图片的左上角会被放置在元素背景的左上角。使用 100% 100% 则会让原始图片的右下角对齐到背景的右下角。

如果你想让原始图片位于背景宽度的三分之一处，垂直方向位于背景高度的三分之二处，可以这样声明：

|
.custom-position {
  background-image: url('decorative.png');
  background-repeat: no-repeat;
  background-position: 33% 66%;
}

使用这些规则，原始图片中距离左上角三分之一宽度、三分之二高度的点会对齐到背景中相应的点上。需要注意的是，在使用百分比值时，水平值总是出现在前面。如果你在前面的例子中交换百分比的位置，图片中距离左侧三分之二、距离顶部三分之一的位置会被放置在背景中距离左侧三分之二、距离顶部三分之一的位置上。

如果只提供了一个百分比值，这个值会被视为水平值，垂直值会被假设为 50%。例如，如果只设置 background-position: 25%，原始图片会被放置在段落背景宽度的四分之一处，垂直方向上位于中间位置，就好像设置了 background-position: 25% 50% 一样。

关键词组合	等价关键词	等价百分比
center	center center	50% 50%
center	50%	50% 50%
right	right center	100% 50%
right	center right	100% 50%
left	left center	0% 50%
left	center left	0% 50%
top	top center	50% 0%
top	center top	50% 0%
bottom	bottom center	50% 100%
bottom	center bottom	50% 100%
top left	left top	0% 0%
top right	right top	100% 0%
bottom right	right bottom	100% 100%
bottom left	left bottom	0% 100%

background-position 的默认值是 0% 0%，在功能上等同于 top left。这就是为什么除非你设置了不同的定位值，背景图片总是从元素背景的左上角开始平铺。

使用长度值定位

最后，我们来看看使用长度值进行定位。当你为原始图片的位置提供长度值时，这些值会被解释为从元素背景左上角的偏移量。偏移的参考点是原始图片的左上角。因此，如果你设置值为 20px 30px，原始图片的左上角会位于元素背景左上角右侧20像素、下方30像素的位置。

|
.offset-background {
  background-image: url('icon.png');
  background-repeat: no-repeat;
  background-position: 20px 30px;
}

这种方式与百分比值有很大不同，因为偏移是从一个左上角到另一个左上角。换句话说，原始图片的左上角会对齐到 background-position 声明中指定的点。

你可以将长度值和百分比值组合使用，以获得“两全其美”的效果。比如，你需要一个背景图片完全靠右，距离顶部10像素：

|
.combined-position {
  background-image: url('badge.png');
  background-repeat: no-repeat;
  background-position: 100% 10px;
}

你也可以使用 right 10px 来达到同样的效果，因为允许将关键词与长度值和百分比值混合使用。语法在使用非关键词值时强制要求轴顺序：如果使用长度或百分比值，水平值必须总是在前面，垂直值必须在后面。这意味着 right 10px 是正确的，而 10px right 是无效的，会被忽略（因为 right 不是有效的垂直关键词）。

使用负值定位

如果使用长度值或百分比值，你可以使用负值将原始图片拉到元素背景之外。考虑这样一个场景：文档中有一个非常大的图片作为背景，而我们只想让它的一部分在元素背景的左上角可见，这没有问题。

假设原始图片是300像素高、300像素宽，而我们只想让图片右下角的三分之一可见，可以这样实现：

|
.negative-position {
  background-image: url('large-image.png');
  background-repeat: no-repeat;
  background-position: -200px -200px;
}

或者，假设你想要只让原始图片的右半部分可见，并且垂直居中于元素背景区域：

|
.partial-visible {
  background-image: url('large-image.png');
  background-repeat: no-repeat;
  background-position: -150px 50%;
}

负值在创建精美的背景效果时非常有用。负百分比值也是可能的，尽管它们的计算方式有些复杂。原始图片和元素的尺寸可能差异很大，这可能导致意想不到的效果。

控制背景偏移的边缘

前面我们介绍了，background-position 通常默认是以背景区域的左上角为起点计算偏移量。不过，CSS 允许我们更灵活地指定偏移的参照边——不仅可以从左上，也可以从右侧、底部甚至任何边开始计算。

具体来说，当你在 background-position 属性中使用四个关键词（或者由两个方向关键词+两个偏移量这种特殊结构）时，就能明确告诉浏览器：背景图片的偏移量应当从哪条边来计算。

举个例子，我们希望背景图片距左边缘为元素宽度的四分之一，距顶边为30像素。传统写法就是 background-position: 25% 30px;，这实际上就是“从左上角出发”的简写。

但借助四个单词的语法，我们可以直观表达同样的意思：background-position: left 25% top 30px;。这行代码的含义是：“水平方向从左侧起25%，垂直方向从顶部起30像素”，使得定位方式更加明确和专业。

|
/* 从左上角偏移 */
.default-offset {
  background-position: 25% 30px;
}
 
/* 使用四部分语法 */
.four-part-offset {
  background-position: left 25% top 30px;
}
 
/* 从右下角偏移 */
.bottom-right-offset {
  background-position: right 25% bottom 30px;

常见的 background-position 四部分写法遵循这样的格式：“边缘关键字 + 偏移距离 + 边缘关键字 + 偏移距离”。你可以灵活调整水平方向和垂直方向的顺序，因此 bottom 30px right 25% 和 right 25% bottom 30px 这两种写法会实现相同的定位效果。但注意，每个方向的边缘关键字（如 right、bottom）都不能省略，否则像 30px right 25% 这样的写法将被视为无效。

如果某个方向偏移量为 0，也可以直接省略数量部分，比如 right bottom 30px 表示右下角对齐，并在底部偏移 30px；同理，right 25% bottom 则意味着背景图距离右边缘 25% 的宽度位置，对齐底部。

需要注意的是，background-position 的基准点只能是元素的边缘，不能指定为中心。像 center 25% center 25px 这样的用法并不会生效。

当你有多个背景图片而只设置了一个位置值时，所有图片都会应用同样的位置。如果希望每张背景图分开定位，可以传递以逗号分隔的多个 position 值，各图片按顺序应用。若图片数量多于位置值，则多出来的图片会循环使用这些位置参数。

控制背景定位区域

我们已经了解了如何为背景添加图片并灵活设置图片在背景中的位置。如果进一步想让图片的位置参照元素的边框、内边距或内容区域进行定位，该使用什么方式呢？这时就需要用到 background-origin 属性。

background-origin 虽然和 background-clip 看起来类似，但两者侧重点不同：background-clip 用于裁剪背景的可见区域，而 background-origin 则专门用来指定背景图片定位用的参考边界，即“背景定位区域”。

background-origin 默认值是 padding-box，这意味着背景图片的定位（如未特别指定，通常为左上角）会以元素的内边距框（padding box）的左上角为基准点。如果你设置为 border-box，那么 0 0 的原点就会移动到边框的外沿左上角，而不是内边距起点。此时，如果有边框存在，背景图片会在边框之下渲染，只要没有被 background-clip 或 background-size 限制。

而当你选择 content-box，则定位参考点会变为元素内容区域的左上角。下面的代码示例将直观展示三种 background-origin 的定位效果：

|
.origin-demo {
  color: #1a5490;
  background: #c8d6e5;
  background-image: url('logo.png');
  background-repeat: no-repeat;
  padding: 1.5rem;
  border: 0.5rem dashed #5f27cd;
}
 
.origin-border-box {
  background-origin: border-box

记住，这种“放置在左上角”的行为是默认行为，你可以通过 background-position 来改变。原始图片的位置是相对于 background-origin 定义的框来计算的：边框边缘、内边距边缘或内容边缘。

如果你明确地将背景定位区域和背景裁剪区域设置为不同的框，效果会变得非常有趣。想象一下，原始图片相对于内边距边缘定位，但背景绘制区域被裁剪到内容区域，或者相反：

|
.divergence-demo {
  background-image: url('pattern.png');
  background-repeat: no-repeat;
  padding: 1.5rem;
  border: 0.5rem solid #333;
}
 
.origin-padding-clip-content {
  background-origin: padding-box;
  background-clip: content-box;
}

在第一个例子中，原始图片的边缘被裁剪，因为它相对于内边距框定位，但背景绘制区域被裁剪到内容框的边缘。在第二个例子中，原始图片相对于内容框定位，但绘制区域延伸到内边距框。因此，原始图片一直可见到底部内边距边缘，即使它的顶部没有紧贴顶部内边距边缘。

背景重复

视口有无数种尺寸。幸运的是，我们可以平铺背景图片，这意味着我们不需要创建多种尺寸的背景，也不需要为小屏幕、低带宽设备提供大格式（和大文件大小）的壁纸。当你想要以特定方式重复图片，或者根本不想重复时，我们可以使用 background-repeat 属性。

background-repeat 属性的值语法乍一看可能有点复杂，但实际上相当简单。基本上，它只使用四个值：repeat、no-repeat、space 和 round。另外两个值 repeat-x 和 repeat-y 被认为是其他值的组合简写。

如果提供了两个值，第一个值应用于水平方向，第二个值应用于垂直方向。如果只有一个值，它同时应用于水平和垂直方向，但 repeat-x 和 repeat-y 除外。

单个关键词	等价关键词
repeat-x	repeat no-repeat
repeat-y	no-repeat repeat
repeat	repeat repeat
no-repeat	no-repeat no-repeat
space	space space
round	round round

你大概已经能猜到，repeat 会让背景图片在元素的所有方向（水平和垂直）上不断地平铺。repeat-x 和 repeat-y 分别只让图片在水平方向或垂直方向重复，而 no-repeat 则让图片不在该方向上重复。如果你有多张图片且希望每张图片有不同的重复方式，可以用逗号分隔，为每一张分别指定不同的重复值。

这里说“所有方向”而不是“仅仅两个方向”，是因为 background-position 可以把首个平铺图片的位置设在裁剪区域的左上角之外。

当你使用 repeat 时，图片会向四面八方铺满整个背景。通常情况下，背景图片是从元素左上角开始的。例如，下面的规则让图片只在垂直方向重复：

|
.vertical-tile {
  background-image: url('pattern.png');
  background-repeat: repeat-y;
}

假设你想要图片只在文档顶部水平重复。不需要创建一个在下方有很多空白区域的特殊图片，你只需要稍微修改一下规则：

|
.horizontal-tile {
  background-image: url('pattern.png');
  background-repeat: repeat-x;
}

图片沿着x轴（水平方向）从其起始位置重复，在这个例子中，起始位置是 <body> 元素背景区域的左上角。

在某些情况下，你可能不想重复背景图片。在这种情况下，使用 no-repeat 值：

|
.single-image {
  background-image: url('banner.jpg');
  background-repeat: no-repeat;
  background-position: center;
}

对于小尺寸的图片来说，no-repeat 这个取值可能看上去用处不大，但实际上它是最常见、最常用的背景重复设置——可惜它并不是 CSS 的默认值。能灵活地控制背景图片的重复方向，会让你的视觉设计方案变得更丰富、更自由。例如，你可以在每个 <h1> 元素左侧加入一道三重边框，或者为每个 <h2> 元素的顶部添加一条波浪形的边框。只要调整图片的颜色与背景相融合，就能营造出波浪效果。

定位重复的图片

前面我们已经介绍了 repeat-x、repeat-y 和 repeat 的用法，以及它们对背景图片平铺方式的影响。无论是哪一种重复模式，背景图片默认都是从元素背景的左上角开始排布。这是因为——如你之前所见——background-position 的默认值就是 0% 0%。既然你现在已经学会了如何调整背景图片的位置，接下来要了解浏览器（用户代理）在重复时是怎么处理它的。

对比文字描述，不如直接通过例子来进行说明。请看下面的代码：

|
.centered-repeat {
  background-image: url('pattern.png');
  background-position: center;
  background-repeat: repeat-y;
  border: 1px dotted #999;
}
 
.horizontal-center-repeat {
  background-repeat: repeat-x;
}

这些例子之所以能实现理想的平铺效果，是因为原始图片都放在了元素的正中心。第一个例子中，图片会以中心为起点，沿着 y 轴上下方向同时平铺。而第二个例子则是以中心为起点，图片沿着 x 轴向左右两侧平铺。

你可能会注意到，平铺过程中首尾两端的图片可能会被部分裁剪。如果我们将 background-position 设置为 0 0，那么通常只有最后一张图片（或者最右边、最下方的图片）会被裁剪。而图片从元素中心开始平铺时，它会向上、下、左、右四个方向延伸，像一个居中的网格。其实 background-position 只是决定平铺从哪个位置开始。

当背景图片从中心开始平铺时，图案网格会在整个元素内居中，这样图案被裁剪的边缘就会比较对称、均匀。而如果从元素左上角开始平铺，那么每条边被裁剪的情况就不一样。有一点要注意，space 和 round 等铺法可以避免图片被裁剪，但它们也有各自的限制和不足之处。

间距和舍入重复图案

除了你迄今为止看到的基本平铺图案外，background-repeat 还具有精确填充背景区域的能力。例如，考虑如果我们使用 space 值来定义平铺图案会发生什么：

|
.spaced-repeat {
  background-image: url('icon.png');
  background-repeat: space;
}

你会发现，背景图片会出现在元素的四个角落，并且这些图片在水平方向和垂直方向上都被均匀地间隔开。

这正是 space 的效果：它会先计算在每个方向上能完整放下多少个图片，然后把这些图片均匀分布，对齐到背景的边缘。需要注意的是，space 并不保证形成严格等距的方形网格，水平方向和垂直方向的间距通常并不一样。你看到的其实更像是有均匀行和列的图片，但水平方向和垂直方向的间距可以不同。好处是图片一般不会被裁剪（除非图片太大，连放一个都放不下），但结果通常就是水平和垂直间距不完全一致。

请记住，所有背景颜色或元素的“背景层”（其实就是祖先元素的背景叠加效果）都会在这些由 space 布局带来的图片间隙内显示出来。

如果你的背景图片非常大，在某个方向上只能放下一个甚至一个都放不下，会发生什么呢？这时图片只会沿着该轴绘制一次，并按照 background-position 的设置摆放和裁剪。如果能放下一个以上的图片，background-position 在这一方向上就会被忽略。下面的代码就展示了这种情形：

|
.spaced-with-position {
  background-image: url('icon.png');
  background-position: center;
  background-repeat: space;
}

你可以看到，图片在水平方向会自动留出间距来均匀排列（这时 center 就不起作用了），但竖直方向因为空间不够，只放下一张图片，所以还是居中显示，没有间距。这就是 space 的特点：能放下多张就自动分配间距，放不下时就用 background-position 的设置。

再来说说 round。如果你用 round，浏览器会自动缩放图片，让它们“正好”可以塞进背景区域，出现整数个图片。也就是说，不管图片原来多大，都会被自动放大或缩小，填满背景，而且不会管 background-position 了（这个点有点特别）。

另外，round 甚至会根据需要，把图片的宽高比拉伸一下。不仅横着会缩放，竖着也行。这也是 background-repeat 里唯一一个会自动改变图片比例的用法。虽然你用 background-size 也能把图片拉伸变形，但那是你主动设置的，而 round 会自动处理。

|
.rounded-repeat {
  background-image: url('pattern.png');
  background-position: top left;
  background-repeat: round;
}

注意，比如说，如果你的背景宽度是850像素，平铺的图片宽度为300像素，浏览器在使用 round 时，会自动把三张图片缩小到每张大约283.33像素宽，这样刚好能横向整齐地铺满850像素。而如果用 space，浏览器只能放两张图片，并在它们之间加入250像素的间距，round 就没有这样的间隔限制。

这里有个有趣的地方：虽然 round 会调整图片尺寸，让整数张图片正好铺满背景，但是图片的位置不会自动对齐到边缘。也就是说，只有当你的平铺图片是从背景区域的角落开始的，才能保证每个图片都完整显示、不被裁剪。如果你的背景图片不是从角落开始，那么边缘的图片可能会被裁剪掉。

|
.rounded-clipped {
  background-image: url('pattern.png');
  background-position: center;
  background-repeat: round;
}

当你设置 round 作为平铺方式时，浏览器会自动调整图片的大小，让图片刚好横向或纵向整齐地铺满背景区域。不过需要注意，图片虽然被缩放了，但不会自动对齐到边缘。如果你希望图片完全显示且没有被裁剪，最好让背景图片从四个角落之一开始铺，也要保证“背景定位区域”和“绘制区域”一样大。

平铺和裁剪的关系

还记得 background-clip 可以控制背景绘制在哪些区域，而 background-origin 决定背景从哪里开始定位吗？如果你用 space 或 round 并且这两个区域设置得不一样，背景图片就有可能被裁剪掉。简单来说，space 和 round 其实是根据“背景定位区域”来计算图片怎么排列和缩放的，而不是“裁剪区域”。如果裁剪区域和定位区域不是同一个，边界处的图片很容易出现被裁掉的情况，这样看起来可能不是你想要的效果。

那怎么组合参数比较合适？通常，background-origin 和 background-clip 都用 padding-box 会比较稳妥。如果你的元素有透明边框，或者想让背景延伸到边框里，可以用 border-box。

调整背景图片的大小

前面我们讲过了不同图片怎么重复、定位、裁剪等等，之前都是用图片自己的原始大小（除了 round 自动调整的情况）。现在，我们来看看怎么主动改变图片尺寸。

background-size 默认是 auto，也就是说按图片本身大小来显示。如果你要让图片变大变小，就可以给它设置具体的宽高，比如 100px、50% 这样的长度单位。甚至，如果你有多个背景图片，还能分别为每个指定不同的尺寸，只要用逗号隔开就行。

举个例子，我们随便用一张 200×200 的图片，然后让它放大两倍来看看效果：

|
.resized-background {
  background-image: url('logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 400px 400px;
}

使用 background-size，我们可以将原始图片调整为更小的尺寸。我们可以使用 em、像素、视口宽度、任何长度单位，或者它们的组合来设置尺寸。

我们甚至可以通过改变尺寸来扭曲图片。当 background-size 有两个值时，第一个是水平尺寸，第二个是垂直尺寸。如果你允许图片重复，所有重复的图片都会与原始图片具有相同的尺寸。

百分比值更有趣一些。如果你声明一个百分比值，它是相对于背景定位区域计算的，也就是由 background-origin 定义的区域，而不是由 background-clip 定义的区域。假设你想要一个图片，它的宽度和高度都是其背景定位区域的一半：

|
.percentage-size {
  background-size: 50% 50%;
}

你可以混合使用长度值和百分比值：background-size: 25px 100%;。但是你不允许使用负的长度和百分比值。

保持背景图片的宽高比

那么，auto 的默认值到底是什么意思呢？简单来说，当你只给 background-size 提供一个值时，这个值表示水平方向的尺寸，垂直方向的尺寸则默认为 auto。也就是说，background-size: auto 实际等价于 background-size: auto auto。如果你希望图片在垂直方向等比缩放到指定高度，宽度自动适应、保持原始比例，你需要这样写：background-size: auto 333px;

其实，在很多方面，background-size 的 auto 表现和在替换元素（比如图片）的 height、width，或 block-size、inline-size 上设置 auto 的效果很像。换句话说，你会发现，下面的两段规则分别应用在 img 元素和背景图片上时，对同一张图片会产生类似的视觉效果：

|
/* 应用于实际的img元素 */
img.logo {
  width: 300px;
  height: auto;
}
 
/* 应用于背景图片 */
.logo-background {
  background-image: url('logo.png');
  background-repeat: no-repeat;
  background-size: 300px auto;
}

覆盖和包含

现在让我们来看看一个非常实用的场景：如果你希望一张图片完全铺满元素的背景，不在乎图片的某些部分是否会被裁剪掉，这时可以使用 cover：

|
.cover-background {
  background-image: url('hero.jpg');
  background-position: center;
  background-size: cover;
}

这样设置后，原始图片会被缩放，以完全覆盖整个背景区域，同时保持原有的宽高比例（前提是图片本身有宽高比）。比如在这个例子中，一张 200×200 像素的图片会被放大到足以覆盖 800×400 像素的元素背景。

你可能注意到，我们没有设置 background-repeat，因为这里我们希望图片填满整个背景，是否重复其实无关紧要。

另外，你可以发现 cover 和 100% 100% 差别很大。如果使用 100% 100%，图片会被强行拉伸到 800 像素宽、400 像素高，很容易失真。相反，cover 会让图片尽可能变大，填满元素背景，同时仍然居中，保持比例。在本例中，效果等同于 100% auto，但 cover 的好处是无论元素是横着大还是竖着大，图片都能很好地适配和居中显示。

而 contain 则相反，它会把图片缩放到完全显示在背景区域内，即使这样周围会留白。可以看下面的例子：

|
.contain-background {
  background-image: url('banner.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

在这种情况下，由于元素的高度小于宽度，原始图片会被缩放，使它的高度刚好等于背景定位区域的高度，宽度相应等比例缩放，这就类似于 auto 100%。如果元素的高度大于宽度，那么 contain 的表现就像是 100% auto，图片宽度铺满，高度自适应。

本例中我们加上了 no-repeat，这样背景只显示一张图片，视觉不会太杂乱。如果去掉 no-repeat，图片会重复铺满背景，如果你希望如此也可以。

请务必记住：无论你用 cover 还是 contain，背景图片的缩放尺寸都是根据「背景定位区域」来确定的，这个区域由 background-origin 决定。即使你用 background-clip 改变了背景的绘制范围，这个规律也不会变！因此，如果你裁切了背景，cover 和 contain 计算大小时依然是以定位区域为基准，这有时会带来一些意想不到的裁剪效果。

如果你设置了多张背景图片，并且需要分别控制每一张的显示位置、重复方式或尺寸，可以为每个图片分别用逗号分隔写多个值。每个逗号分隔的值都和对应序号的图片配对；如果你提供的值比图片多，多出的会被忽略；如果值比图片少，不足的部分会自动循环使用。不过，背景颜色只能设置一个。

背景简写属性

像 CSS 许多属性一样，各种背景相关属性都可以合并起来，通过 background 这个简写属性统一设置。你要不要用简写形式，要结合实际场景来决定。 background 的写法看上去很复杂，其实可以一步一步来理解和学习，从简单写法逐渐扩展到复杂语法。

像下面这些写法其实都等价，最终效果一样：

|
/* 使用完整属性 */
body {
  background-color: white;
  background-image: url('logo.png');
  background-position: top left;
  background-repeat: repeat-y;
  background-attachment: fixed;
  background-origin: padding-box;
  background-clip: border-box;
  background-size: 50

你可以按大多数顺序混合值的顺序，但有三个限制。首先，任何 background-size 值必须紧跟在 background-position 值之后，并且必须用正斜杠（/）分隔。其次，在这些值中，通常的限制适用：水平值在前，垂直值在后，假设你提供的是轴相关的值（而不是 cover 这样的值）。

第三，如果你同时提供 background-origin 和 background-clip 的值，你列出的第一个值会被分配给 background-origin，第二个会被分配给 background-clip。因此，以下两个规则在功能上是相同的：

|
/* 这两个规则是等价的 */
body {
  background: url('logo.png') top left/50% 50% padding-box repeat-y fixed;
}
 
body {
  background: url('logo.png') top left/50% 50% padding-box fixed border-box;

另外需要注意的是，当你只提供一个类似的值时，这个值会同时作用于 background-origin 和 background-clip。比如下面的写法，会把背景定位区域和背景绘制区域都设为内边距框：background: url('logo.png') padding-box top left/50% 50%;

简写属性和其他 CSS 简写一样，如果你省略了其中某些值，系统会自动为你补上默认值。因此，这两个写法完全等价：background: white url('logo.png'); 实际上等于 background: white url('logo.png') transparent scroll padding-box border-box;

更方便的是，background 这个简写属性没有强制要写的内容——只要你至少设置了一个值，其他部分都可以省略不写。比如，日常开发中只需要设置背景色，经常可以这样简写：background: white;

需要注意的是，background 作为一个简写属性，每次设置时都会把相关的背景设置整体覆盖，也就是说会把这个元素上原有的所有背景相关属性都重置为默认值。例如：

|
/* 错误示例：会清除所有背景设置 */
h1, h2 {
  background: gray url('trees.jpg') center repeat-x;
}
 
h2 {
  background: silver; /* 这会清除所有之前的背景设置 */
}
 
/* 正确示例：只改变背景颜色 */
h1, h2 {
  background: gray url('trees.jpg') center

根据这些规则，<h1> 元素会应用第一条规则指定的样式，而 <h2> 元素会应用第二条规则。这样一来，<h2> 元素最终只会显示单调的银色背景，原本的背景图片效果，包括居中和平铺，也都不会生效。实际上，作者的本意很可能只是想改变背景颜色，而不是移除其他背景设置。

多个背景

在前面，我们已经简单提到，几乎所有的背景相关属性都可以同时设置多个、用逗号分隔的值。比如，如果你想要为元素设置三张不同的背景图片，可以这样写：

|
.multiple-backgrounds {
  background-image: url('bg01.png'), url('bg02.png'), url('bg03.png');
  background-repeat: no-repeat;
}

这样就创建了三个背景图层，每个图片占据一个图层，最下面的是最后一张图片。三张图片默认都会叠放在元素的左上角，并且不会重复。这是因为我们只写了一次 background-repeat: no-repeat，但对于所有三张背景图片都生效了。

当某个背景相关属性（比如 background-repeat）的值数量少于 background-image 的数量时，浏览器会自动循环补全，直到数量匹配为止。所以，上面的例子等效于：background-repeat: no-repeat, no-repeat, no-repeat;

现在，假设我们希望第一张图片放在右上角，第二张在左侧中间，第三张在底部中间。我们可以像这样分别为它们设置 background-position：

|
.positioned-backgrounds {
  background-image: url('bg01.png'), url('bg02.png'), url('bg03.png');
  background-position: top right, left center, center bottom;
  background-repeat: no-repeat;
}

类似地，假设我们想让前两个图层不重复，但第三个水平重复：

|
.mixed-repeat {
  background-image: url('bg01.png'), url('bg02.png'), url('bg03.png');
  background-position: top right, left center, center bottom;
  background-repeat: no-repeat, no-repeat, repeat-x;
}

几乎所有的背景相关属性都可以这样使用逗号分隔，为每一个背景图层分别设置不同的起始位置、裁剪区域、尺寸等参数，几乎所有细节都能单独指定。从理论上说，你可以设置无限多个背景图层，不过太多图层其实并没有实际意义。

即使是 background 这个简写属性，也支持通过逗号分隔来设置多个背景图层。下面这个示例和上面完全一样：

|
.shorthand-multiple {
  background: 
    url('bg01.png') right top no-repeat,
    url('bg02.png') center left no-repeat,
    url('bg03.png') 50% 100% repeat-x green;
}

多个背景的唯一真正限制是 background-color 不会以这种方式重复，如果你为 background 简写提供逗号分隔的列表，颜色只能出现在最后一个背景图层上。如果你将颜色添加到任何其他图层，整个背景声明将无效。因此，如果我们想为前面的示例设置绿色背景填充，可以通过以下两种方式之一来实现：

|
/* 方法1：在最后一个图层添加颜色 */
.with-color-1 {
  background: 
    url('bg01.png') right top no-repeat,
    url('bg02.png') center left no-repeat,
    url('bg03.png') 50% 100% repeat-x green;
}
 
/* 方法2：单独设置背景颜色 */
.with-color-2 {
  background

之所以会有限制，是因为如果你把背景颜色加在第一个图层上，这个颜色会覆盖整个背景区域，把后面的所有背景图层都挡住。所以 CSS 规定，背景颜色只能放在最后一个，也就是“最底层”的背景图层上。

这种排列顺序非常关键，建议尽早熟悉。因为它和 CSS 其他地方的一些规则刚好相反。在普通情况下，比如你先写 background-color: red; 再写 background-color: green;，绿色会覆盖红色，最后写的生效，所以 <h1> 的背景是绿色。

而在多背景写法中就反过来了，比如这样写：

|
h1 {
  background: 
    url('box-red.gif'),
    url('box-green.gif'),
    green;
}

没错，最终你看到的，就是红色那一层。因为在多背景的时候，红色 GIF 会盖在绿色 GIF 上面，离你最近。虽然我们平常写 CSS，总是“后来者居上”，也就是最后写的属性会覆盖前面的，但在多背景的时候，顺序正好是反的——谁写在前面，谁在上面。

如果你用过 PS 或者其它画图软件，可以把 CSS 多背景想象成一个个的图层。CSS 中，最前面的背景就像图层面板最上面那张，越往后的背景就越被压在下面。也就是说，写在 CSS 列表前面的图片会挡住后面的图片。因为平常写 CSS 的习惯，很多人一开始会不太适应，经常写反（我在很多年前也有这个习惯，不用担心）。

另外，多个背景还有个很容易踩到的坑：如果你用 background 简写，但没有特别写 background-repeat，那图片会默认重复平铺，比如顶层图片不断重复，刚好把下面的背景全都遮死了。所以，像刚才例子里那样需要“no-repeat”，否则下层根本不会显示——这也是我们一开始特意加 background-repeat: no-repeat 的原因。

创建盒阴影

到现在为止，你已经学习了边框图片、轮廓和背景图片的用法。CSS 还有一个可以为元素增添内外效果、但又不会影响盒模型自身的属性——这就是 box-shadow。

我们先来看一个最基础的盒阴影例子：给元素添加一个在其右下方向偏移 10 像素的半透明黑色阴影。同时，页面的 <body> 会设置一个重复的背景图片。下面的例子会一并演示这些效果：

|
.shadow-box {
  background: silver;
  border: medium solid #333;
  box-shadow: 10px 10px rgba(0, 0, 0, 0.5);
}

你会发现，<body> 的背景图样其实能透过这个半透明的阴影区域看到。这里我们只设置了阴影的偏移，没有加模糊或者扩散效果，所以阴影的轮廓和元素本身完全重合，看上去就像盒子直接“拖”出了影子一样。

注意，阴影其实是画在元素盒子外面的，看起来就像这个元素投下了一个影子。上面的例子里，由于盒子的背景色是不透明的，阴影和盒子分界不太明显，你可能会以为阴影是在盒子下方，不过其实不是这样的。接下来我们看一个例子，去掉背景色后就一目了然了：

|
.transparent-shadow-box {
  background: transparent;
  border: thin dashed #999;
  box-shadow: 10px 10px rgba(0, 0, 0, 0.5);
}

你会发现，元素的内容、内边距和边框这些地方，好像把阴影挡住了一样，就像把阴影“挖掉”了一块。其实，阴影根本不会画在这些区域里——这是按照 CSS 规范来的。所以，像上面的例子，后面的盒子即使有阴影，只要被其他元素覆盖了，就能直接看到下面的背景。这种看上去有点奇怪的效果，其实就是盒子阴影和背景、边框之间交互的原因——也正因为如此，我们现在才专门来解释 box-shadow，而不是前面就说到它。

到目前为止，你已经见过给盒子阴影设置两个长度值的写法。第一个是水平偏移量，第二个是垂直偏移量——比如正数就让阴影往右下方偏，负数就往左上角偏。

如果你再加第三个长度值，就是“模糊半径”，用来控制阴影有多模糊。第四个长度值是“扩展半径”，会让阴影变大（正值），或者缩小（负值）。下面的代码就是这些不同效果直观的例子：

|
.shadow-example-1 {
  box-shadow: 1em 1em 2px rgba(0, 0, 0, 0.3);
}
 
.shadow-example-2 {
  box-shadow: 2em 0.5em 0.25em rgba(0, 0, 0, 0.2);

你可能已经注意到，这些盒子有些设置了圆角（border-radius），阴影的形状也会随之产生弧度，这是符合规范、也是正常的效果。

此外，还有一个 box-shadow 的用法我们还没有介绍，就是 inset 关键字。当你在 box-shadow 的值前加上 inset 时，阴影会渲染在盒子的内部，看起来就像是在盒子里挖了个洞，而不是让盒子“漂浮”在阴影上方。下面我们用前面的例子，改造成内阴影（inset shadow）的形式：

|
.inset-shadow-1 {
  box-shadow: inset 1em 1em 2px rgba(0, 0, 0, 0.3);
}
 
.inset-shadow-2 {
  box-shadow: inset 2em 0.5em 0.25em rgba(0, 0, 0,

需要注意，inset 关键字既可以放在值的开头，也可以放在结尾，但不能插在长度和颜色之间。比如像 0 0 0.1em inset gray 这样的写法，由于 inset 出现在长度和颜色之间，会被当作无效值而被忽略。

另外，你可以像写 text-shadow 一样，用逗号分隔为一个元素添加多个盒阴影，可以同时拥有内阴影（inset）和外阴影。下面只是两个示例，实际上盒阴影的组合可以非常丰富：

|
.multiple-shadows {
  padding: 20px;
  box-shadow: 
    inset 0 -3em 3em rgba(0, 0, 0, 0.1),
    0 0 0 2px rgb(255, 255, 255),
    0.3em 0.3

多个阴影会按照声明顺序从下到上依次绘制，和背景图片的叠加方式类似。也就是说，逗号分隔列表里的第一个阴影最终会位于所有其他阴影的最上层。比如下面这个例子：

|
.layered-shadows {
  box-shadow: 
    0 0 0 5px red,
    0 0 0 10px blue,
    0 0 0 15px green;
}

在绘制顺序上，绿色阴影会最先渲染，其上是蓝色，最后最外层的是红色。虽然盒阴影可以设置很大的扩展范围，但它们并不会影响盒模型本身，也不会占用实际空间。因此，尤其在使用较大的偏移或模糊距离时，要注意元素需有足够的空间来展示阴影效果。

除了 box-shadow，还可以使用 filter 属性为元素添加阴影，filter 更类似于 text-shadow，并且会作用于整个元素盒和文本上。filter 能实现包括阴影、模糊、色彩调整等多种视觉效果。如果你需要更丰富的视觉表现，可以尝试使用 filter 属性。

小结

为元素添加背景，无论是使用颜色还是图片，都会极大增强页面的视觉表现力。与传统方法相比，CSS 允许我们将颜色和背景灵活地应用到任何元素，还能通过丰富的属性实现多变且复杂的视觉效果。

本节课中，我们学习了如何设置背景颜色，裁剪背景区域，使用背景图片，以及如何设置背景图片的位置、重复方式和大小，还学会了如何实现多个背景图层。此外，我们还介绍了盒阴影的用法，这是一种既不影响盒模型、又能让元素更具层次感的装饰方式。

背景系统是 CSS 中最强大、最灵活的特性之一，它为我们实现从简约到复杂的视觉设计提供了广阔的空间。掌握这些技巧，将能够帮助你打造既美观又实用的网页界面。

实战练习

练习1：背景颜色设置

为一个段落元素设置半透明的红色背景色，要求背景色的透明度为50%。

|
p {
  background-color: rgba(255, 0, 0, 0.5);
}

或者使用 HSLA：

|
p {
  background-color: hsla(0, 100%, 50%, 0.5);
}

练习2：背景裁剪

创建一个有边框的div，设置背景颜色为蓝色，要求背景只显示在内容区域，不延伸到边框区域。

|
div {
  background-color: blue;
  border: 10px solid black;
  padding: 20px;
  background-clip: content-box;
}

练习3：背景图片定位

为一个div设置背景图片，要求图片显示在右下角，不重复。

|
div {
  background-image: url('image.jpg');
  background-position: bottom right;
  background-repeat: no-repeat;
}

或者使用简写：

|
div {
  background: url('image.jpg') bottom right no-repeat;
}

练习4：背景图片居中

创建一个背景图片，要求图片在容器中水平和垂直居中显示，不重复。

|
div {
  background-image: url('logo.png');
  background-position: center;
  background-repeat: no-repeat;
}

或者：

|
div {
  background: url('logo.png') center no-repeat;
}

练习5：背景重复控制

设置一个背景图片，要求在水平方向重复，但垂直方向不重复。

|
div {
  background-image: url('pattern.png');
  background-repeat: repeat-x;
}

练习6：背景图片缩放

为一个元素设置背景图片，要求图片缩放到容器宽度的50%，高度自适应保持比例。

|
div {
  background-image: url('photo.jpg');
  background-size: 50% auto;
  background-repeat: no-repeat;
}

练习7：背景覆盖

创建一个背景图片，要求图片完全覆盖容器，保持比例，可能会有部分图片被裁剪。

|
div {
  background-image: url('hero-image.jpg');
  background-size: cover;
  background-position: center;
}

练习8：多重背景

创建一个元素，同时设置两张背景图片：一张作为主要背景，另一张作为装饰性图案放在右上角。

|
div {
  background:
    url('decoration.png') top right no-repeat,
    url('main-bg.jpg') center/cover;
}

练习9：盒阴影

为一个元素添加外阴影，阴影向右下方偏移10px，模糊半径为5px，颜色为半透明黑色。

|
div {
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}

练习10：内阴影

创建一个具有内阴影效果的输入框，阴影向内偏移2px，颜色为浅灰色。

|
input {
  box-shadow: inset 0 0 5px rgba(128, 128, 128, 0.3);
  border: 1px solid #ccc;
  padding: 8px;
}

练习11：多个阴影

为一个按钮元素添加多个阴影效果：一个内阴影用于深度感，一个外阴影用于立体感。

|
button {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.2);
  border: none;
  padding: 10px

练习12：文字背景裁剪

创建一个标题，要求背景渐变只在文字轮廓内显示，文字本身透明。

|
h1 {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 2rem;
}