Link element#
rel: 它的值必须是一组无序的、唯一的、用空格隔开的关键字。例：rel="stylesheet"、rel="preload stylesheet"等。
rel=“preload”#
当 rel 的值是 preload 时，as 为必填。
以更高的优先级去下载和缓存资源，不会触发事件。
rel=“prefetch”#
用户将来可能需要这个资源，浏览器在空闲时间时（优先级低）下载和缓存资源。
HTMLImageElement (<img/>)#
src#
相关资料：
获取图片的要应用的元素：
- 父节点是
<picture />时，获取<img />之前的<source />兄弟元素 <img />
获取应用元素的 src：
srcset 格式: https://example.com 2x、https://example.com 300w
其中 2x 为 devicePixelRatio（物理像素分辨率与CSS 像素分辨率之比）, 当浏览器的 devicePixelRatio 于该值匹配时，使用该图片。
其中 300w 为图像的固有尺寸
sizes 格式: (max-height: 500px) 1000px
其中 (max-height: 500px) 为媒体条件，意思为视口不高于 500px，使用该图片。可以不写，默认为 true。
其中 1000px 为资源大小的值，
Background#
background-clip#
根据属性对背景进行裁剪，超出部分不渲染。
border-box: 默认值，将背景裁剪到边框外沿。
padding-box: 将背景裁剪到内边距外沿。
content-box: 将背景裁剪到内容区外沿。
background-image#
在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”(最后渲染它)，background-color 会在它们之下绘制。
例子：
background-image: url(A), url(B);background-color: red;
z轴:最高 A B red最低background-origin#
指定背景图片 background-image 属性的原点位置。
border-box：以边框的(0， 0)（即左上角）位置为图像的渲染原点。
padding-box：默认值，以内边距的(0， 0)位置为图像的渲染原点。
content-box：默认值，以内容区的(0， 0)位置为图像的渲染原点。
background-position#
百分比：
给定背景图像位置的百分比偏移量是相对于容器的。例：
(container width - image width) * (position x%) = (x offset value)(container height - image height) * (position y%) = (y offset value)
// 假设我们有一个 300px 宽的图像，我们在一个 100px 宽的容器中使用它
// -25%。结果：向右偏移 50px，即图像的原点在容器的中心。(100px - 300px) * -25% = 50px(100px - 300px) * 0% = 0(100px - 300px) * 50% = -100px(100px - 300px) * 100% = -200px// 120%。结果：向左偏移 100px，即图像的最右侧在容器的中心。(100px - 300px) * 120% = -250pxbackground-repeat#
space: 尽可能最少数量的图像填补，允许有空白。有两个图像以上时，background-position 属性会被忽略。
round: 用图像填补所有空间，允许压缩图片。
background-size#
位图: 一定有固有尺寸与固有比例。
矢量图: 可能两者都有(width-height viewBox)，也可能只有一个， 也可能都没有（游览器会补充一个300*150的大小）。
渐变: 视为只有固有尺寸或者只有固有比例的图片。
cover: 尽可能大的缩放背景图像并保持图像的宽高比例来填满空间。不会有空白，超出时裁剪掉。
contain: 尽可能的缩放背景并保持图像的宽高比例来填满空间。可能会有空白。
auto auto:
- 图像有固有尺寸: 使用这个固有尺寸。
- 图像有一个长度但是没有比例: 使用此长度与背景区相应的长度。
- 图像有一个长度与比例: 由此长度与比例计算大小。
- 图像没有固有尺寸与固有比例: 效果同
contain。
auto 和 non auto:
指定长度的使用指定值。
- 图像有固有比例: 未指定的长度由指定值与固有比例计算。
- 图像没有固有比例: 未指定的长度使用图像相应的固有长度，没有固有长度，使用背景区相应的长度。
相关知识#
AffineTransform#
一个表示二维仿射变换的类，用于执行从 2D 坐标到其他 2D 坐标的线性映射。它通过平移、缩放、旋转和错切等操作构造变换，并使用一个 3×3 矩阵表示变换过程。
kurbo Affine: [a, b, c, d, e, f]
下面公式为 (x, y) 经过变换生成新的坐标：
Scale 缩小 (s_x, s_y) 倍#
Affine::scale(0.5, 0.5) * Affine
Translate 平移 (s_x, s_y)#
Affine::translate(0.5, 0.5) * Affine
Rotate 旋转 (a)#
Affine::rotate(a) * Affine