背景 在 CSS 中
允许您使用颜色和图像样式化元素背景的 CSS 属性
新！ 我的 44 页电子书“CSS 在 44 分钟内”已经发布！ 😃
#background-attachment
定义如何在滚动页面时背景图像的行为。
默认 background-attachment: scroll;
背景图像将与页面一起滚动。它还将根据其应用到的元素进行定位和调整大小。
background-attachment: fixed;
背景图像不会与页面一起滚动，并将根据视窗进行定位。它还将根据视窗进行定位和调整大小。因此，背景图像可能只会部分可见。
#background-clip
定义背景应该在元素中扩展多远。
默认 background-clip: border-box;
背景完全扩展到整个元素，甚至在边框之下。
background-clip: padding-box;
背景只扩展到边框的边缘：它包含填充，但不包含边框。
background-clip: content-box;
背景只扩展到内容的边缘：它不包含填充，也不包含边框。
#background-color
定义元素背景的颜色。
默认 background-color: transparent;
默认情况下，背景颜色为透明，基本上意味着没有背景颜色。
background-color: red;
您可以使用140 多个颜色名称。
background-color: #05ffb0;
您可以使用十六进制颜色代码。
background-color: rgb(50, 115, 220);
您可以使用rgb()颜色代码
- 第一个值用于
red - 第二个值用于
green - 第三个值用于
blue
它们中的每一个都可以具有从0到255的值。
background-color: rgba(50, 115, 220, 0.3);
您可以使用rgba()颜色代码
- 前 3 个值用于
rgb - 第 4 个值用于
alpha通道，并定义颜色的不透明度
alpha 值可以从零0（透明）到一1（不透明）。
background-color: hsl(14, 100%, 53%);
您可以使用hsl()颜色代码
- 第一个值用于
hue，可以从0到359 - 第二个值用于
saturation，可以从0%到100% - 第三个值用于
luminosity，可以从0%到100%
background-color: hsla(14, 100%, 53%, 0.6);
您可以使用hsl()a颜色代码
- 前 3 个值用于
hsl - 第 4 个值用于
alpha通道，并定义颜色的不透明度
alpha 值可以从零0（透明）到一1（不透明）。
#background-image
将图像定义为元素的背景。
默认 background-image: none;
删除任何背景图像。
background-image: url(/images/jt.png);
使用url路径中定义的图像。此路径可以是相对的（到 css 文件）或绝对的（如https://cssreference.cn/images/jt.png）。
background-image: linear-gradient(red, blue);
您可以将线性渐变定义为背景图像。
您需要定义至少两种颜色。第一个将从顶部开始，第二个将从底部开始。
默认角度为to bottom（或180deg），这意味着渐变是垂直的，从元素的顶部开始，到元素的底部结束。
background-image: linear-gradient(45deg, red, blue);
您可以使用角度指定，以度或关键字形式。
在使用度时，您指定渐变的方向或其结束位置。因此0deg表示元素的顶部，就像钟表上的 12:00 一样。
在本例中，45deg表示 2:30 或右上角。
background-image: radial-gradient(green, purple);
您可以将径向渐变定义为背景图像。
您需要定义至少两种颜色。第一个将在中心，第二个将在边缘。
background-image: radial-gradient(circle, green, purple);
您可以指定径向渐变的形状：circle或ellipse（默认）。
background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);
您可以使用百分比值指定颜色停止。
background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);
您可以指定渐变应该结束的位置
closest-sideclosest-cornerfarthest-sidefarthest-corner
background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);
与background-position一样，您可以指定渐变的位置。
#background-origin
定义背景图像的原点。
默认 background-origin: padding-box;
背景图像从边框的边缘开始：位于内边距内，但不包括边框。
background-origin: border-box;
背景图像从边框下方开始。
background-origin: content-box;
背景图像仅从内容的边缘开始：不包括内边距，也不包括边框。
#background-position
定义背景图像的位置。
默认 background-position: 0% 0%;
背景图像将位于水平轴的0%和垂直轴的0%处，这意味着元素的左上角。
background-position: bottom right;
您可以使用位置关键字的组合：center、top、bottom、left和right。
background-position: center center;
背景图像将位于元素的中心。
#background-repeat
定义背景图像如何从背景位置开始，在元素的背景上重复自身。
默认 background-repeat: repeat;
背景图像将在水平和垂直方向上重复自身。
background-repeat: repeat-x;
背景图像将仅在水平方向上重复自身。
background-repeat: repeat-y;
背景图像将仅在垂直方向上重复自身。
background-repeat: no-repeat;
背景图像将仅显示一次。
#background-size
定义背景图像的大小。
默认 background-size: auto auto;
背景图像将保留其原始大小。
例如，此背景图像的大小为960px x 640px。它的纵横比为3:2。它比它的容器（高 150px）更大，因此会被裁剪。
background-size: 120px 80px;
您可以使用像素指定大小
- 第一个值是水平大小
- 第二个是垂直大小
background-size: 100% 50%;
您也可以使用百分比值。请注意，这可能会改变背景图像的纵横比，并导致意外的结果。
background-size: contain;
关键字contain将调整背景图像大小以确保它完全可见。
background-size: cover;
关键字cover将调整背景图像大小以确保元素完全覆盖。