English
资源说明：像我之前提到的那样，文档树中的每个元素只是一个矩形盒子。这些盒子都有一个背景层，背景层可以是完全透明或者其它颜色，也可以是一张图片。此背景层由8个CSS属性（加上1个简写的属性）控制。
background-color
background-color属性设置元素的背景颜色。它的值可以是任意合法的颜色值或者是transparent关键字。
.left { background-color: #ffdb3a; }
.middle { background-color: #67b3dd; }
.right { background-color: transparent; }
背景颜色绘制
在CSS中，背景属性是一个非常重要的概念，它允许开发者对网页元素添加丰富的视觉效果。本文将深入探讨CSS中的背景属性，主要包括`background-color`、`background-image`、`background-repeat`、`background-size`以及`background-attachment`。
`background-color`属性用于设置元素的背景颜色。它可以接受任何有效的颜色值，例如RGB、HEX、RGBA、HSL、HSLA或关键词，如`transparent`。以下示例展示了不同背景颜色的设置：
```css
.left { background-color: #ffdb3a; } /* 金黄色 */
.middle { background-color: #67b3dd; } /* 深蓝色 */
.right { background-color: transparent; } /* 透明 */
```
背景颜色的绘制范围由`background-clip`属性控制，它定义了背景颜色填充的盒模型区域。默认情况下，颜色会填充整个元素的边框盒。
`background-image`属性允许设置一个或多个背景图片。你可以通过`url()`函数提供图片的URL，或者使用`none`值去除背景图片。同时，可以使用逗号分隔多个背景图片，它们将按照声明的顺序堆叠：
```css
.left { background-image: url('image.png'); }
.right { background-image: none; }
.middle { background-image: url('khaled.png'), url('ire.png'); }
```
`background-repeat`属性决定背景图片如何平铺。可选值包括`repeat`（默认，水平和垂直平铺）、`repeat-x`（只水平平铺）、`repeat-y`（只垂直平铺）、`no-repeat`（不平铺）、`space`（均匀分布留有间隔）和`round`（自动调整大小以适应平铺）。可以分别设置X轴和Y轴的平铺方式：
```css
.top-inner-left { background-repeat: repeat-y; }
.bottom-outer-right { background-repeat: round space; }
```
`background-size`属性控制背景图片的尺寸。你可以使用`contain`关键字让图片按比例缩放以适应元素，确保整个图片可见；`cover`则会保持图片的宽高比，缩放至完全覆盖元素。还可以指定长度或百分比来精确设定图片大小：
```css
.left { background-size: contain; }
.right { background-size: cover; }
```
`background-attachment`属性决定背景图片是否随元素内容滚动或固定在视口。可选值有`scroll`（默认，随元素内容滚动）、`fixed`（固定在视口）和`local`（随元素自身滚动，仅适用于内联元素）：
```css
.scroll-bg { background-attachment: scroll; }
.fixed-bg { background-attachment: fixed; }
.local-bg { background-attachment: local; }
```
以上是CSS背景属性的主要方面，它们共同作用于元素的背景，提供了强大的视觉设计能力。通过灵活组合这些属性，开发者可以创建出各种复杂而美观的网页布局。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
