CSS 背景

背景颜色
渐变色背景
多背景叠加
背景图片和属性（精灵图、雪碧图 Sprite）
base64 和性能优化
多分辨率适配

背景

MDN

background - CSS：层叠样式表 | MDN (mozilla.org)

CSS 的 background 属性用于设置元素的背景样式。它可以用来设置背景颜色、图片、平铺方式等。

background 语法

css

background =
  [ <bg-layer># , ]? <final-bg-layer>

<bg-layer> =
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <box>                           ||
  <box>

<final-bg-layer> =
  <'background-color'>            ||
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <box>                           ||
  <box>

<bg-image> =
  <image>  |
  none

<bg-position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]

<bg-size> =
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain

<repeat-style> =
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}

<attachment> =
  scroll  |
  fixed   |
  local

<box> =
  border-box   |
  padding-box  |
  content-box

<image> =
  <url>       |
  <gradient>

<length-percentage> =
  <length>      |
  <percentage>

<url> =
  url( <string> <url-modifier>* )  |
  src( <string> <url-modifier>* )

background =
  [ <bg-layer># , ]? <final-bg-layer>

<bg-layer> =
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <box>                           ||
  <box>

<final-bg-layer> =
  <'background-color'>            ||
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <box>                           ||
  <box>

<bg-image> =
  <image>  |
  none

<bg-position> =
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]

<bg-size> =
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain

<repeat-style> =
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}

<attachment> =
  scroll  |
  fixed   |
  local

<box> =
  border-box   |
  padding-box  |
  content-box

<image> =
  <url>       |
  <gradient>

<length-percentage> =
  <length>      |
  <percentage>

<url> =
  url( <string> <url-modifier>* )  |
  src( <string> <url-modifier>* )

background-color: 用于设置元素的背景颜色。可以使用任何有效的颜色值，例如十六进制值、RGB 值、颜色名称等。
css
```
div {
  background-color: #cccccc;
}
```
```
div {
  background-color: #cccccc;
}
```
1
2
3

background-image: 用于设置元素的背景图片。可以使用任何有效的图片地址。

css

div {
  background-image: url("image.jpg");
}

div {
  background-image: url("image.jpg");
}

background-repeat: 用于设置背景图片的平铺方式。
- repeat（默认值，沿水平和垂直方向平铺）
- repeat-x（沿水平方向平铺）
- repeat-y（沿垂直方向平铺）
- no-repeat（不平铺）
css
```
div {
  background-image: url("image.jpg");
  background-repeat: no-repeat;
}
```
```
div {
  background-image: url("image.jpg");
  background-repeat: no-repeat;
}
```
1
2
3
4
background-position: 用于设置背景图片的位置。可以设置为一个关键词（例如left、center、right、top、middle、bottom）或一个长度值（例如10px 20px）。
css
```
div {
  background-image: url("image.jpg");
  background-position: center;
}
```
```
div {
  background-image: url("image.jpg");
  background-position: center;
}
```
1
2
3
4
background-size: 用于设置背景图片的大小。可以设置为一个关键词（例如auto、cover、contain）或一个长度值（例如100px 200px）。
css
```
div {
  background-image: url("image.jpg");
  background-size: cover;
}
```
```
div {
  background-image: url("image.jpg");
  background-size: cover;
}
```
1
2
3
4
background-attachment 属性用于设置背景图像是否固定或随着内容滚动而滚动。
- scroll: 背景图像随着内容滚动而滚动。这是默认值。
- fixed: 背景图像固定在视口中，不随着内容滚动而滚动。即使页面滚动，背景图像仍会保持在固定的位置。这种情况下，当页面滚动时，背景图像相对于视口是固定的。
- local: 背景图像随着内容滚动而滚动，但是它相对于元素内部滚动而不是视口滚动。这意味着，当元素内部滚动时，背景图像也会滚动。如果元素本身不能滚动，则 local 和 scroll 是一样的效果。
- initial: 重置该属性为默认值。
- inherit: 继承父元素的该属性值。
css
```
div {
  background-image: url(bg-image.jpg);
  background-attachment: fixed; /* 背景图像不会随着页面滚动而滚动，保持在其父元素或视口的位置不变*/
}
```
```
div {
  background-image: url(bg-image.jpg);
  background-attachment: fixed; /* 背景图像不会随着页面滚动而滚动，保持在其父元素或视口的位置不变*/
}
```
1
2
3
4
除了以上的属性外，background还可以简写为一个属性，用于同时设置背景颜色、背景图片、平铺方式、背景位置和背景大小。其中，/用于分隔背景位置和背景大小。
css
```
div {
  background: #cccccc url("image.jpg") no-repeat center / cover;
}
```
```
div {
  background: #cccccc url("image.jpg") no-repeat center / cover;
}
```
1
2
3

除了以上提到的属性，还有一些其他的 CSS 背景属性，例如 background-origin、background-clip 等，它们可以用于更精细地控制背景样式。

背景颜色

CSS 中的颜色可以使用多种格式来指定，包括预定义的颜色名称、十六进制值、RGB 值、HSL 值等。其中，RGB 和 HSL 是最常用的颜色表示方法之一。

RGB

RGB 颜色模型使用红（R），绿（G）和蓝（B）三个颜色通道来定义颜色。

每个通道的值范围从 0 到 255，代表该颜色在红、绿、蓝三个通道上的亮度，0 表示没有颜色，255 表示该颜色的最大强度。

例如

rgb(255, 0, 0) 表示红色
rgb(0, 255, 0) 表示绿色
rgb(0, 0, 255) 表示蓝色

在 CSS 中，还可以使用百分数来表示 RGB 值，例如，rgb(100%, 0%, 0%) 表示红色。

除了使用三个数字来表示 RGB 值之外，还可以使用 RGBA 来表示带有透明度的颜色，其中 A 表示 alpha 通道，取值范围是 0 到 1。例如，rgba(255, 0, 0, 0.5) 表示半透明的红色。

HSL

HSL 颜色模型使用色相（H），饱和度（S）和亮度（L）三个值来定义颜色，分别是色相、饱和度和亮度。

色相表示颜色在色轮上的位置，从 0 度（红色）到 360 度（再次回到红色），表示颜色的基本色调；
饱和度表示颜色的强度或纯度，取值范围是 0% 到 100%，0% 表示灰色，100% 表示全彩色；
亮度表示颜色的明暗程度，取值范围也是 0% 到 100%，0% 为黑色，100% 为白色。

例如

hsl(0, 0%, 0%) 表示黑色
hsl(0, 0%, 100%) 表示白色
hsl(0, 100%, 50%) 表示红色
hsl(120, 100%, 50%) 表示绿色
hsl(240, 100%, 50%) 表示蓝色

和 RGB 一样，HSL 也可以使用带有透明度的格式 HSLA 来表示带有透明度的颜色，其中 A 表示 alpha 通道，取值范围是 0 到 1。例如，hsla(0, 100%, 50%, 0.5) 表示半透明的红色。

相比于 RGB，HSL 的优点在于更加直观和易于理解，因为它可以直观地描述颜色的基本属性，而不是简单地描述三个颜色通道的值。而在进行颜色选择、搭配时，HSL 能够更好地控制颜色的亮度和饱和度，也更加灵活。例如，要使一种颜色更亮，只需增加其 L 值，而不必调整 RGB 值的每个通道。

另一方面，RGB 模型可能更适合程序化生成颜色或需要精确控制颜色的情况，因为可以使用十六进制或 RGB 函数来准确指定每个通道的值。

渐变色背景

MDN

linear-gradient() - CSS：层叠样式表 | MDN (mozilla.org)

CSS 中的 background 渐变色是一种在背景中使用渐变颜色的方法，它可以让网页设计者创建出更加生动、美观的背景效果。渐变背景通常由两种或多种颜色组成，它们通过平滑的过渡渐变来呈现一种平滑的颜色过渡效果，可以实现线性渐变和径向渐变两种方式。

多背景叠加

MDN

多个背景的应用 - CSS：层叠样式表 | MDN (mozilla.org)

你可以应用多个背景到元素，这些背景在你添加的第一个背景的上方和最后一个背景的下方分层叠加，只有最后的背景可以包含背景颜色。

css

.myclass {
  background: background1, background 2, ..., backgroundN;
}

.myclass {
  background: background1, background 2, ..., backgroundN;
}

CSS 中的多背景叠加是一种将多个背景图像合并到同一元素上的方法。通过多背景叠加，可以为元素提供更丰富的视觉效果，而不必使用多个元素或伪元素。

要使用多背景叠加，可以在 CSS 中使用 background-image 属性来设置多个背景图像，使用逗号分隔每个图像。

css

.element {
  background-image: url(bg1.png), url(bg2.png), url(bg3.png);
  background-position: center bottom, left top, right top;
  background-repeat: no-repeat;
}

.element {
  background-image: url(bg1.png), url(bg2.png), url(bg3.png);
  background-position: center bottom, left top, right top;
  background-repeat: no-repeat;
}

在上面的示例中，.element 元素使用了三个背景图像，分别是 bg1.png、bg2.png 和 bg3.png。每个图像都使用逗号分隔，并按照它们在 background-image 属性中出现的顺序叠加在一起。

同时，我们还设置了 background-position 属性来指定每个背景图像的位置。这里的 center bottom 表示第一个背景图像（即 bg1.png）在元素的底部中央显示，left top 和 right top 表示第二个和第三个背景图像在元素的左上角和右上角显示。

最后，我们还设置了 background-repeat: no-repeat 属性，以确保每个背景图像只出现一次，并不会在水平或垂直方向上重复显示。

值得注意的是，如果您想要使用多个背景图像，请确保每个图像的尺寸和宽高比都相同，以避免出现不必要的扭曲或拉伸。

除了 background-image、background-position 和 background-repeat 属性之外，还有一些其他的 CSS 属性可以用于控制多背景叠加的效果，例如 background-size、background-origin 和 background-clip 等。这些属性可以帮助您更好地控制每个背景图像的大小、位置和显示范围。

背景图片和属性

MDN

background-image - CSS：层叠样式表 | MDN (mozilla.org)

background-image 属性用于为一个元素设置一个或者多个背景图像。

在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。

然后元素的边框 border 会在它们之上被绘制，而 background-color 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系，需要在 CSS 属性background-clip 和 background-origin 中定义。

如果一个指定的图像无法被绘制 (比如，被指定的 URI 所表示的文件无法被加载)，浏览器会将此情况等同于其值被设为 none。

备注

即使图像是不透明的，背景色在通常情况下并不会被显示，web 开发者仍然应该指定 background-color 属性。如果图像无法被加载—例如，在网络连接断开的情况下—背景色就会被绘制。

css

background-image: linear-gradient(to bottom, rgba(255, 255, 0, 0.5), rgba(0, 0, 255, 0.5)), url("catfront.png");

background-image: linear-gradient(to bottom, rgba(255, 255, 0, 0.5), rgba(0, 0, 255, 0.5)), url("catfront.png");

雪碧图/精灵图 Sprite

MDN

在 CSS 中实现图像合并 - CSS：层叠样式表 | MDN (mozilla.org)

CSS 图像合并（Image sprites）技术，亦作 CSS 贴图定位、图像精灵（sprite，意为精灵），被运用于众多使用大量小图标的网页应用之上。它可取图像的一部分来使用，使得使用一个图像文件替代多个小文件成为可能。相较于一个小图标一个图像文件，单独一张图片所需的 HTTP 请求更少，对内存和带宽更加友好。

备注

当使用 HTTP/2 时，使用多个小流量请求实际上可能更为带宽友好。

css

.toolbtn {
  background: url(myfile.png);
  background-position: <pixels shifted right>px <pixels shifted down>px;
  display: inline-block;
  height: 20px;
  width: 20px;
}

.toolbtn {
  background: url(myfile.png);
  background-position: <pixels shifted right>px <pixels shifted down>px;
  display: inline-block;
  height: 20px;
  width: 20px;
}

深入阅读：Perfect CSS Sprite / Sliding Doors Button | CSS-Tricks - CSS-Tricks

base64 和性能优化

MDN

Base64 的编码与解码 | MDN (mozilla.org)

Base64 是一组相似的二进制到文本（binary-to-text）的编码规则，使得二进制数据在解释成 radix-64 的表现形式后能够用 ASCII 字符串的格式表示出来。Base64 这个词出自一种 MIME 数据传输编码。
Base64 编码普遍应用于需要通过被设计为处理文本数据的媒介上储存和传输二进制数据而需要编码该二进制数据的场景。这样是为了保证数据的完整并且不用在传输过程中修改这些数据。Base64 也被一些应用（包括使用 MIME 的电子邮件）和在 XML 中储存复杂数据时使用。

Base64 是一种将图片文件编码为文本字符串的技术，使得可以将这些文本字符串直接嵌入到 CSS 代码中，从而避免了浏览器下载图片文件的过程，减少了 HTTP 请求，提高了页面加载速度。同时，也可以避免了由于图片的相对路径引起的问题，使得 CSS 代码更加简洁易懂。

但是，使用 CSS 背景图片 Base64 也会有一些性能上的问题：

大小限制：Base64 编码后的文本字符串大小通常会比原始图片文件大 30% ~ 40%，这意味着使用 Base64 编码的图片应该是比较小的，否则将会增加页面加载时间。通常情况下，只有小于 10KB 的图片才适合使用 Base64 编码。
编码耗时：将图片编码为 Base64 字符串是一个相对较慢的过程，如果需要在运行时编码大量的图片，则会对性能产生一定的影响。通常情况下，可以将图片预处理为 Base64 字符串，以减少运行时的开销。
缓存问题：使用 CSS 背景图片 Base64 的另一个问题是，浏览器无法缓存这些图片，因为它们已经被嵌入到了 CSS 代码中。这意味着每次页面加载时都需要重新下载所有的图片。因此，如果您需要使用一些常用的图片，最好将它们存储在单独的文件中，并将其缓存起来，以减少页面加载时间。

因此，在使用 CSS 背景图片 Base64 时，需要权衡其优缺点，并根据实际情况进行选择。如果使用得当，CSS 背景图片 Base64 可以在一定程度上提高页面性能。

多分辨率适配

MDN

响应式设计 | MDN (mozilla.org)

多分辨率适配是指在不同设备分辨率下，保持网页在各种设备上的可用性和可访问性。在移动设备中，由于设备分辨率的差异和屏幕大小的多样性，需要使用不同的样式和布局来适应不同的设备。以下是一些 CSS 中实现多分辨率适配的技术：

响应式布局：使用响应式设计，可以在不同的设备上调整网站布局和样式。通过使用媒体查询，可以根据屏幕分辨率和设备特征来调整元素的大小和位置。这可以使网站在不同的设备上呈现出最佳的效果。
弹性布局：使用弹性布局，可以根据屏幕尺寸和屏幕比例调整元素的大小和位置。弹性布局是一种可以自适应屏幕大小的布局方式，通过设置元素的百分比宽度、高度和间距来实现。这种布局方式可以在不同的设备上呈现出类似的效果。
视口（Viewport）：在 CSS 中，可以通过视口（Viewport）来控制网站在不同的设备上的显示。视口是指网页在浏览器中显示的区域，可以通过设置 meta 标签来调整视口的大小。使用视口可以使网站在不同的设备上呈现出更加一致的效果。
图片适配：在移动设备上，大型图片可能会导致加载时间过长和页面响应变慢。为了避免这种情况，可以使用图片适配技术。这种技术可以根据设备分辨率和网速来选择适当的图片大小和格式，以提高网站的性能和响应速度。

综上所述，多分辨率适配是一种关键的技术，可以帮助网站在不同的设备上提供最佳的用户体验。通过使用响应式布局、弹性布局、视口和图片适配等技术，可以实现在各种设备上的自适应和自适应性，从而提高网站的性能和可用性。

CSS 背景 #

背景 #

背景颜色 #

RGB #

HSL #

渐变色背景 #

多背景叠加 #

背景图片和属性 #

雪碧图/精灵图 Sprite #

base64 和性能优化 #

多分辨率适配 #