CSS的背景及三大特性

背景属性是CSS中非常重要的一部分，它允许我们设置页面元素的背景样式。CSS背景属性允许指定背景颜色，背景图片，背景平铺，背景位置，背景原点等。

1. 背景颜色：

背景颜色属性是用来设置元素的背景颜色的。其主要是通过指定十六进制值、RGB、RGBA、HSL、HSLA或者预定义的颜色名称来实现的。

div {
  background-color: #ff0000; /* 十六进制颜色 */
}
 
div {
  background-color: rgb(0, 255, 0); /* RGB颜色 */
}
 
div {
  background-color: hsl(120, 100%, 50%); /* HSL颜色 */
}
 
div {
  background-color: red; /* 预定义的颜色名称 */
}

2. 背景图片：

背景图片属性是用来设置元素的背景图片的。其主要是通过指定图片的URL路径来实现的。

div {
  background-image: url('image.jpg'); /* 设置背景图片 */
}

3. 背景平铺：

背景平铺属性是用来设置背景图片是否及如何平铺的。其主要是通过指定repeat-x、repeat-y、repeat、space、round、no-repeat来实现的。

div {
  background-repeat: repeat-x; /* 背景图片横向平铺 */
}
 
div {
  background-repeat: repeat-y; /* 背景图片纵向平铺 */
}
 
div {
  background-repeat: no-repeat; /* 背景图片不平铺 */
}

4. 背景位置：

背景位置属性是用来设置背景图片的起始位置的。其主要是通过指定关键词（如top、bottom、left、right、center）或者百分比（如50% 75%）来实现的。

div {
  background-position: top right; /* 背景图片放置在右上角 */
}
 
div {
  background-position: 50% 75%; /* 背景图片放置在水平方向50%、垂直方向75%的位置 */
}

5. 背景原点：

背景原点属性是用来设置背景定位区域的原点的。其主要是通过指定关键词（如padding-box、border-box、content-box）来实现的。

div {
  background-origin: border-box; /* 背景定位区域的原点在边框区域 */
}
 
div {
  background-origin: padding-box; /* 背景定位区域的原点在内边距区域 */
}
 
div {
  background-origin: content-box; /* 背景定位区域的原点在内容区域 */
}

6. 背景尺寸：

背景尺寸属性是用来设置背景图片的尺寸的。其主要是通过指定长度值或者百分比（如auto、100px 50px、50% 33%）来实现的。

div {
  background-size: auto; /* 背景图片保持原始尺寸 */
}
 
div {
  background-size: 100px 50px; /* 背景图片的宽度为100px、高度为50px */
}
 
div {
  background-size: cover; /*