快速轻松的 HTML5 & CSS3 - 背景图片的新功能

作者：Rob Crowther

在本篇文章《HTML5 & CSS3 快速入门》中，作者讨论了关于背景图像的四个新特性：尺寸调整；单个元素上的多重背景；相对于边框、内边距或内容的定位；以及根据边框、内边距或内容裁剪。Manning.com 为 Code Project 社区提供 40% 的折扣。在 manning.com 上使用促销代码 code40project，即可享受 MEAP、eBook 和 pBook 优惠 40%。所有 pBook 购买均包含免费的电子格式（PDF、ePub 和 Kindle），如果可用。

您可能还对以下内容感兴趣…

在此示例中，已将图像设置为标题的装饰性背景

h1 {
    background-image: 
      url('head-banner.png');
    background-repeat: no-repeat;
    padding-top: 1.85em;
}

顶部内边距已设置为允许背景图像的空间，图像本身的大小已设置为与标题的宽度匹配。

然而，如果标题发生任何变化，背景图像可能会显得有些不协调。如果我们将在“Columbia Internet”翻译成法语，突然间图像下面会有些文字凸出来，视觉关系也就丢失了。

新的 background-size 属性允许图像按比例拉伸以适应元素的尺寸

h1 {
    background-image: 
      url('head-banner.png');
    background-repeat: no-repeat;
    background-size: 100% 1.85em;
    padding-top: 1.85em;
    display: inline-block;
}

h1 被设置为内联块元素，因此其宽度会收缩以适应内容，然后背景图像被设置为固定高度和全宽度。您可以看到，随着元素宽度的增加，图像会变形。这种方法仅适用于允许预期元素宽度发生小幅变化的情况。

如果文本保持不变但显示不同的字体大小，则可以避免纵横比问题。如果您知道文本的宽度，只需按纵横比指定宽度和高度即可。

h1 {
    background-image: 
      url('head-banner.png');
    background-repeat: no-repeat;
    padding-top: 2.18em;
    display: inline-block;
    background-size: 11.1em 2.18em;
}
section:nth-of-type(1) h1 {
    font-size: 200%;
}
section:nth-of-type(2) h1 {
    font-size: 250%;
}
section:nth-of-type(3) h1 {
    font-size: 300%;
}

div {
    background-image: url('aj.png');
    background-repeat: no-repeat;
    background-size: 50% 100%;
    padding-left: 50%;
    display: inline-block;
}

div {
    background-image: url('aj.svg');
    background-repeat: no-repeat;
    background-size: 50% 100%;
    padding-left: 50%;
    display: inline-block;
}

此示例显示了主内容，其半透明背景叠加在设置为填充整个框的背景图像之上。这是标记

<section>
  <div>
    <p>In almost every...</p>
  </div>
</section>

下面列表显示了对此的 CSS。  与前面的示例不同，此示例使用了简写语法。大小与位置用斜杠分隔：top / 100%。

让我们重新审视上一节的最后一个示例，但这次没有额外的 div 元素来包装内容。

<section>
  <div>
    <p>In almost every...</p>
  </div>
</section>

尽管去掉了额外的元素，页面看起来仍然一样。这是因为该 section 元素应用了两个背景。

添加多重背景图像只需将它们以及任何相关属性，用逗号分隔写在 background 属性中即可。

background: top right
  url('pitr-head.png') no-repeat,
 bottom right
  url('aj-head.png') no-repeat,
 top left
  url('mike-head.png') no-repeat,
 bottom left
  url('sid-head.png') no-repeat;

所有其他背景属性也允许使用逗号分隔的列表，因此您也可以这样写：

background-image:
 url('pitr-head.png'), url('pitr-head.png'),
 url('mike-head.png'), url('sid-head.png');
background-position:
 top right, bottom right,
 top left, bottom left;
background-repeat: 
 no-repeat, no-repeat,
 no-repeat, no-repeat;

您首先列出的背景图像将最靠近查看者。如果您将它们都放在同一个位置，您会看到第一张图像覆盖了其余图像。

background: center
  url('pitr-head.png') no-repeat,
 center
  url('aj-head.png') no-repeat,
 center
  url('mike-head.png') no-repeat,
 center
  url('sid-head.png') no-repeat;

您可以利用这一点来创造一些有趣的效果。在这里，我们在每张其他背景图像之间使用一张半透明的 PNG 图像来创建渐进式渐变。

background: top right
  url('pitr-head.png') no-repeat,
 url('half-white.png'),
 bottom right
  url('aj-head.png') no-repeat,
 url('half-white.png'),
 top left
  url('mike-head.png') no-repeat,
 url('half-white.png'),
 bottom left
  url('sid-head.png') no-repeat;

background-origin 的默认值为  padding-box。这意味着背景应用于包含内边距的区域，但不应用于包含边框的区域。

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-origin: padding-box;
}

此示例图像已缩放到填充其容器，并且设置为不重复。

将 origin 设置为 border-box 意味着背景将延伸到边框下方。

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-origin: border-box;
}

最后，content-box 将背景限制在内容区域内部，即内边距之内。

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-origin: content-box;
}

background-clip 的默认值为 border-box。

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-clip: border-box;
}

请记住，我们的示例已缩放并设置为不重复。

当应用于不重复的背景时，由于 background-origin 的默认值，这与 padding-box 无法区分。

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-clip: padding-box;
}

然而，如果允许背景重复，则区别会显现出来。padding-box 的设置仍然会在边框内裁剪图像，但对于 border-box，我们可以看到边框下方的重复图像。

section {
    background-clip: border-box;
    background-repeat: repeat;
}

最后，content-box 会将背景裁剪到内容区域。

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-clip: content-box;
}

请注意，即使背景被裁剪，图像仍然按照 padding-box 的尺寸进行缩放。

Python 快速入门（第二版）
Vernon L. Ceder

Liferay 实战
Richard Sezov, Jr.

Sass 和 Compass 实战
作者：Wynn Netherland、Nathan Weizenbaum 和 Chris Eppstein