CSS 背景：多重、尺寸和来源

多个背景

这是自 Bing Crosbie 登顶榜单以来，网页设计师们一直翘首以盼的“舞步”。

CSS3 允许您通过简单地将图片位置放在逗号分隔的列表中，为单个框应用多个背景图片。

background-image: url(this.jpg), url(that.gif), url(theother.png);

更有用的是，您还可以定义所有其他令人愉悦的背景方面。例如，如果您想为一个厚实的、按钮状的链接设置独立的背景、项目符号和箭头，您可以使用类似这样的方法：

background: url(bg.png), url(bullet.png) 0 50% no-repeat, url(arrow.png) right no-repeat;

很简单，对吧？这与使用 background-image、background-position、background-repeat、background-attachment 和 background 相同，只是您可以通过那个方便的小逗号指定多个背景。

背景尺寸

background-size 属性允许您拉伸或压缩背景图片。

值可以是：

• auto，保持背景图片的原始尺寸和宽高比。
• 长度值，一个宽度和一个高度，例如 100px 50px（100px 宽，50px 高）。指定一个长度值，例如 100px，将等同于 100px auto。
• 百分比值，一个宽度和一个高度，例如 50% 25%（背景区域宽度的 50%，背景区域高度的 25%）。指定一个百分比值，例如 50%，将等同于 50% auto。
• 长度值、百分比值和 auto 的组合，例如 80px auto（80px 宽，自动高度以保持图片的原始比例）。
• contain，保持背景图片的原始比例，并使其尽可能大，同时完全包含在框的背景区域内。
• cover，保持背景图片的原始比例，并使其足够大以填充整个背景区域，这可能会导致裁剪高度或宽度。

背景来源

background-origin 是这堆属性里那个非常无聊的“孩子”。不是不聪明，只是无聊。就是那个被其他孩子指指点点、嘲笑的对象。该属性定义了一个框的背景区域实际开始的位置。如果您想到框模型，当您设置背景时，默认情况下，它应该从 padding box 的左上角开始。所以如果您有...

#burrito {
    width: 400px;
    height: 200px;
    border: 10px solid rgba(0,255,0,.5);
    padding: 20px;
    background: url(chilli.png) 0 0 no-repeat;
}

...背景图片应该出现在左上角，在 padding box 中，紧挨着绿色边框的内边缘。但是，您可以使用 background-origin 来改变这种行为。它的自描述值可以是 padding-box（默认，如上所述）、border-box 和 content-box。

因此，在前面的示例中添加 background-origin: border-box 将导致背景图片的来源被“塞进”边框内部。