CSS 图像模块 3 级

1. 介绍

在 CSS 1 和 2 级中， 图像值（如 background-image 属性中使用的图像值）， 只能通过单一的 URL 值指定。 本模块引入了更多表示二维图像的方法， 例如作为渐变的形式。

本模块还定义了若干用于操作光栅图像的属性， 以及用于尺寸调整或定位 替换元素（如图片）在由 CSS 布局算法决定的盒子内的属性。 还以通用方式定义了 CSS 的图片及其他类似替换元素的尺寸算法。

本小节（上文）不具规范性。

1.1. 模块交互

本模块定义并扩展了 <image> 值类型， 该类型定义于 [CSS-VALUES-3]。 同时还在 CSS1 和 CSS2 中的 background-image、cursor 和 list-style-image 定义中， 用 <image> 替换了 <url> 类型， 并在 content 属性值中，将 <image> 作为 <url> 的可选替代项添加进来。 预计 CSS2.1 以后的 CSS 规范将使用 <image> 记法替代 <url>，以用于二维图像的场景。 （参见如 [CSS3BG]。）

本模块定义的属性中，只有 image-rendering 可应用于 ::first-line 和 ::first-letter。

1.2. 值定义

本规范遵循 CSS 属性定义约定 （见[CSS2]）， 并采用 值定义语法（见 [CSS-VALUES-3]）。 未在本规范中定义的值类型，在 CSS Level 2 Revision 1 [CSS2] 中定义。 其它 CSS 模块也可能扩展这些值类型的定义： 例如当与本模块结合使用时，[CSS-VALUES-3] 增加了 initial 关键字作为可用属性值。

除定义中特有的属性值外， 本规范定义的所有属性 也都接受 CSS 全局关键字 作为属性值。 为了可读性，这些关键字未被重复列出。

2. 图像值：<image> 类型

<image> 值类型表示二维图像。 它可以是url 引用或颜色渐变。 其语法为：

<image> = <url> | <gradient>

<image> 可用于许多 CSS 属性， 包括 background-image、list-style-image、cursor 属性 [CSS2]（在这些属性值中替换了 <url> 组件）。

在某些情况下，图像是无效的， 例如 <url> 指向的资源不是有效的图像格式 或加载失败时。 无效图像 渲染为 无 自然尺寸 的纯色透明图片。 但无效图像 在某些上下文下可触发错误处理条款。 例如，在 list-style-image 属性中，无效图像 被视为 none， 从而允许 list-style-type 渲染其内容。[CSS2]

图片加载过程中， 被称为 加载中图像。加载中图像 不是 无效图像， 但表现类似： 它们会被渲染为无 自然尺寸 的纯色透明图片， 并可在支持降级渲染的场景下触发降级渲染， 但不得触发降级资源的加载。 另外，如果某个 加载中图像 恰好替换了已加载的图片 （如文档或样式表发生更改导致）， 且 UA 跟踪了该信息， 则可继续显示原已加载的图片， 而不是新的 加载中图像。

部分加载的图片（其 自然尺寸 已知，但图像数据未完全加载） 可被视为 加载中图像 或作为已加载但数据不全的图片渲染。 例如 UA 可在首批像素数据加载完成后，即时渲染交错 GIF， 或在解析完图像头（包含尺寸数据）后立即渲染， 并随更多数据加载刷新渲染； 也可等图片完全加载后再使用。

计算后 <image> 值 是将 指定值 中的所有 <url>、<color> 及 <length> 计算后的结果。

2.1. 图片引用：url() 语法

最简单的图片指定方式是通过 URL 引用图片文件。 这可通过 url() 语法实现， 其定义见 [CSS-VALUES-3]。

background-image: url(wavy.png);

如果 UA 无法下载、解析或以其他方式成功显示 URL 所指内容为图片 （即图片未能完全解码）， 则必须将其视为 无效图像。

2.1.1. 二义性引用或图片 URL

URL 在许多场景下用于多种类型资源， 因此可有多种解释方式。 通常 URL 所在上下文 可以明确资源的解释方式， 但在某些情况下 可能存在歧义。 例如， mask-image 属性的 <url> 值如果指向 SVG 文件， 既可解释为文件中某元素的引用， 也可解释为 <image>。

二义性图片 URL 指 可被解释为 <url> 类型的值， 既可作为 <image>，也可作为元素引用。 若二义性图片 URL 是仅片段的 URL， 则必须视为元素引用。 否则，若 二义性图片 URL 的片段引用到资源中适用于当前上下文的元素 （如 mask 元素对应 mask-image 属性）， 则解释为元素引用。 否则，解释为 <image>。

使用 二义性图片 URL 概念的规范 必须明确 URL 有效引用的元素类型， 及其它适用条件。

2.1.2. 图片元数据

图片可包含元数据， 如分辨率和方向， 用于指定图片的渲染方式。 某些图片格式允许灵活设置元数据在文件中的位置； 但若元数据出现在实际图像数据之后， 则会影响 UA “渐进解码”图片并在数据流入时显示的能力。

为减少上述影响：

• 作者必须将元数据置于图片文件中图像数据之前生成图片。 （注：大多数图片默认如此。）

• 用户代理应忽略出现在文件中图像数据之后的影响布局的元数据（如方向或分辨率）。 （注：此规则不影响不影响布局的元数据，如色彩空间信息。）

  若用户代理无法根据元数据在文件中的位置选择是否忽略（如所用解码器未报告元数据所在位置）， 则必须始终使用该元数据。 （特别地，不能只在图片“很小”且文件很快下载完时使用元数据， 而在图片很大且元数据直到图片开始显示后才下载到时忽略元数据。）

3. 渐变

渐变是一种颜色平滑过渡的图像。 常用于背景图片、按钮等的柔和阴影。 本节描述的 渐变函数 允许作者用简洁语法指定这类图像， 由 UA 渲染页面时自动生成图片。 <gradient> 的语法如下：

<gradient> =
  <linear-gradient()> | <repeating-linear-gradient()> |
  <radial-gradient()> | <repeating-radial-gradient()>

渐变绘制在 具体对象尺寸 的盒子内， 称为 渐变盒。 但渐变本身没有 自然尺寸。

渐变通过定义 起点 和 终点 以及 渐变线（根据渐变类型，可为直线、射线或螺线）， 并在该线上指定颜色来实现。 颜色在该线上平滑混合填充， 各类型渐变还定义了如何根据 渐变线 的颜色生成实际渐变图像。

3.1. 线性渐变：linear-gradient() 语法

线性渐变通过指定一条直 渐变线， 并在该线上放置若干颜色来创建。 生成图像时，会构造一张无限画布， 在画布上绘制与渐变线垂直的线条， 每条线的颜色取自它与渐变线的交点的颜色。 这样就能实现从一种颜色平滑过渡到下一种颜色， 并按指定方向渐变。

3.1.1. linear-gradient() 语法

linear-gradient() 语法 用于在 CSS 中指定线性渐变。 其语法如下：

<linear-gradient()> = linear-gradient( [ <linear-gradient-syntax> ] )

<linear-gradient-syntax> = [ <angle> | to <side-or-corner> ]? , <color-stop-list>

<side-or-corner> = [left | right] || [top | bottom]

该函数的第一个参数指定 渐变线， 用于确定渐变方向及色标的位置。 该参数可省略； 若省略，则默认值为 to bottom。

渐变线 的方向可通过两种方式指定：

使用 <angle>

对于该参数，0deg 表示向上， 正角度为顺时针旋转， 90deg 则指向右侧。

若 <angle> 为零，则可省略单位标识符。

使用关键字

若参数为 to top、to right、to bottom 或 to left， 则 渐变线 的角度分别为 0deg、90deg、180deg、270deg。

若参数指定盒子的角落（如 to top left）， 渐变线 需朝该角落所在象限倾斜， 并垂直于穿过 渐变盒 相邻两个角的直线。这样，50% 的色标正好与这两个相邻角相交（见 示例）。

从 渐变盒 的中心出发， 沿指定角度向两侧延展一条直线。 终点为 渐变线 上与垂直于 渐变线 的直线在指定方向与 渐变盒 角落的交点。 起点则以相反方向同理确定。

注： 预计本模块的下一版本将允许根据当前文本方向及 writing-mode 定义渐变方向。

该示例形象展示了如何根据上述规则计算 渐变线。 图中标识了 渐变线 的起点和终点， 以及实际的渐变， 由 background: linear-gradient(45deg, white, black); 的元素生成。

注意，虽然起点和终点都在盒子外部， 但它们正好使渐变在对应角落完全为纯白和纯黑。 这正是有意为之，并且对线性渐变始终成立。

渐变的色标通常放于 起点与终点之间的 渐变线上， 但并不强制： 渐变线 是无限延展的。 起点和终点仅作为定位参考， 起点对应色标 0%、0px 等位置， 终点对应 100% 的位置。 色标允许出现在 0% 之前或 100% 之后。

线性渐变在任意点的颜色， 由穿过该点且垂直于 渐变线 的唯一直线确定。 该点的颜色即为该直线与 渐变线 的交点处的颜色。

3.1.2. 线性渐变示例

以下所有 linear-gradient() 示例都假定应用于一个宽 200px、高 100px 的盒子的背景。

linear-gradient(yellow, blue);
linear-gradient(to bottom, yellow, blue);
linear-gradient(180deg, yellow, blue);
linear-gradient(to top, blue, yellow);
linear-gradient(to bottom, yellow 0%, blue 100%);

linear-gradient(135deg, yellow, blue);
linear-gradient(-45deg, blue, yellow);

linear-gradient(yellow, blue 20%, #0f0);

linear-gradient(to top right, red, white, blue)

3.2. 径向渐变：radial-gradient() 语法

在径向渐变中， 颜色不是像线性渐变那样从盒子的某一侧平滑过渡到另一侧， 而是从一个点开始， 以圆形或椭圆形状向外平滑扩散。

radial-gradient() 语法用于指定径向渐变， 通过指明渐变的中心 （即 0% 椭圆的位置）， 以及 终止形状（即 100% 椭圆）的大小和形状。 色标以列表方式给出， 与 linear-gradient() 一样。 从 渐变中心出发，向 终止形状（以及可能超出终止形状）方向， 绘制并着色一组按比例缩放的同心椭圆， 按照指定色标渲染。

3.2.1. radial-gradient() 语法

径向渐变的语法为：

<radial-gradient()> = radial-gradient( [ <radial-gradient-syntax> ] )

<radial-gradient-syntax> =
  [ <radial-shape> || <radial-size> ]? [ at <position> ]? ,
  <color-stop-list>

<radial-size> = <radial-extent> | <length [0,∞]> | <length-percentage [0,∞]>{2}

<radial-extent> = closest-corner | closest-side | farthest-corner | farthest-side

<radial-shape> = circle | ellipse

radial-gradient(5em circle at top left, yellow, blue)

注： 未来的版本可能会增加移动渐变焦点的能力， 如原始 -webkit-gradient() 函数。 参见 提案，跟踪于 Issue 1575，涉及 "from position" 和 "from offset <offset>" 的语法。

各参数定义如下：

<position>

决定渐变的 中心。 <position> 值类型 （也用于 background-position）， 定义于 [CSS-VALUES-3]， 并以中心点为对象区域， 渐变盒为定位区域进行解析。 若省略此参数， 默认为 center。

<radial-shape>

可为 circle 或 ellipse； 分别决定渐变的 终止形状为圆形或椭圆。 若省略 <radial-shape>， 当 <radial-size> 为单一 <length> 时终止形状默认为圆，否则为椭圆。

<radial-size>

决定渐变的 终止形状的尺寸。 若省略，默认为 farthest-corner。 可通过关键字或显式数值指定。 在关键字定义中， 视 渐变盒边界为无限延伸的直线， 而不是有限线段。

若终止形状为椭圆， 其主轴与水平和垂直方向对齐。

circle 和 ellipse 渐变均接受以下 <radial-extent> 值：

closest-side

终止形状尺寸使其正好与距离渐变中心最近的 渐变盒边相切。 若为椭圆，则在各维度上分别与最近的边相切。

farthest-side

与 closest-side 类似， 但 终止形状尺寸基于最远的边。

closest-corner

终止形状尺寸使其通过距离渐变中心最近的 渐变盒角。 若为椭圆， 终止形状采用与指定 closest-side 时相同的宽高比。

farthest-corner

与 closest-corner 类似， 但 终止形状尺寸基于最远的角。 若为椭圆， 终止形状采用与指定 farthest-side 时相同的宽高比。

若 radial-shape 指定为 circle 或省略时， radial-size 可显式指定为：

<length [0,∞]>

显式给出圆的半径。 负值无效。

注： 此处不允许百分比； 仅可用于指定椭圆渐变的尺寸，不能用于圆形渐变。 这是因为百分比参照哪一维有多种合理解释。 未来可能允许用百分比指定圆的尺寸，并能更明确控制参考维度。

若 radial-shape 指定为 ellipse 或省略时，radial-size 可显式指定为：

<length-percentage [0,∞]>{2}

显式给出椭圆的尺寸。 第一个值为水平半径， 第二个值为垂直半径。 百分比值相对于 渐变盒的对应维度。 负值无效。

radial-gradient() = radial-gradient(
  [ [ circle               || <length [0,∞]> ]                          [ at <position> ]? , |
    [ ellipse              || <length-percentage [0,∞]>{2} ]            [ at <position> ]? , |
    [ [ circle | ellipse ] || <radial-extent> ]                     [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop-list>
)

3.2.2. 色标定位

色标放置在类似射线（从一点出发、向一个方向无限延伸）的 渐变线上， 类似于线性渐变的 渐变线。 渐变线的 起点在渐变中心， 并向右延伸， 终点为 渐变线与 终止形状的交点。 色标可放在 0% 之前的位置； 虽然 渐变线的负区间不会直接用于渲染， 但放在那里的色标可通过插值或重复影响非负区间的颜色 （参见重复渐变）。 例如 radial-gradient(red -50px, yellow 100px) 会生成一个椭圆渐变， 中心起始为红橙色（实际为 #f50），渐变到黄色。 超过 100% 的位置表示距离中心更远的位置。

任意点的渐变颜色， 先找到通过该点的唯一椭圆， 且该椭圆中心、方向及主/次轴比与终止形状一致。 然后该点颜色取为该椭圆与 渐变线正向部分交点处的颜色。

3.2.3. 退化径向渐变

某些位置、尺寸和形状组合 会导致圆或椭圆半径为 0。 例如， 如果中心位于 渐变盒边缘并指定 closest-side 或 closest-corner， 或显式指定尺寸且某半径为零。 在这些退化情况下， 渐变必须按如下方式渲染：

若 终止形状 是半径为 0 的圆：

按 终止形状为极小但大于 0 的圆渲染。这样渐变视觉上仍像圆形。

若 终止形状 宽度为 0（不论高度如何）：

按 终止形状为极大高度、极小但大于 0 的宽度的椭圆渲染。这样渐变视觉上类似于以中心为轴对称的水平线性渐变。 此时所有百分比色标都解析为 0px。

否则，如 终止形状高度为 0：

按 终止形状为极大宽度、极小但大于 0 的高度的椭圆渲染。这样渐变视觉上为纯色图片， 其颜色为最后一个色标的颜色， 或为重复情况下的平均色。

3.2.4. 径向渐变示例

以下所有示例都应用于宽 200px、高 100px 的盒子。

radial-gradient(yellow, green);
radial-gradient(ellipse at center, yellow 0%, green 100%);
radial-gradient(farthest-corner at 50% 50%, yellow, green);

radial-gradient(circle, yellow, green);

radial-gradient(red, yellow, green);

radial-gradient(farthest-side at left bottom, red, yellow 50px, green);

radial-gradient(closest-side at 20px 30px, red, yellow, green);
radial-gradient(20px 30px at 20px 30px, red, yellow, green);

radial-gradient(closest-side circle at 20px 30px, red, yellow, green);
radial-gradient(20px 20px at 20px 30px, red, yellow, green);

3.3. 重复渐变：repeating-linear-gradient() 和 repeating-radial-gradient() 语法

除了 linear-gradient() 和 radial-gradient()， 本规范还定义了 repeating-linear-gradient() 和 repeating-radial-gradient()。 这些语法的参数和解释与前述非重复渐变完全相同。

<repeating-linear-gradient()> = repeating-linear-gradient( [ <linear-gradient-syntax> ] )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <radial-gradient-syntax> ] )

但在渲染时，色标会以首尾色标距离为周期，在两个方向无限重复。 例如：repeating-linear-gradient(red 10px, blue 50px) 等价于 linear-gradient(..., red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, ...)。 注意，每组首尾色标总是在边界重合， 如果渐变首尾颜色不同会产生明显的跳变。

repeating-linear-gradient(red, blue 20px, red 40px)

repeating-radial-gradient(red, blue 20px, red 40px)

repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%)

如果首尾色标距离非零， 但足够小以致实现知道输出设备物理分辨率不足以忠实渲染渐变， 则实现必须 取渐变的平均色，并以该平均色渲染为纯色图像。

如果首尾色标距离为零 （或因实现限制四舍五入为零）， 实现必须以色标数量和颜色一致、但首尾色标间距为任意非零值且其余色标均匀分布的渐变 取平均色，并以该平均色渲染为纯色图像。

如果重复径向渐变的终止形状宽度非零、高度为零， 或者高度足够小以致实现知道输出设备物理分辨率不足以忠实渲染渐变， 实现必须 取渐变的平均色，并以该平均色渲染为纯色图像。

注： 退化径向渐变一节 描述了终止形状宽度为零时的调整方式。

要取渐变的平均色， 按以下步骤：

1. 定义 list 为一个初始为空的预乘 RGBA 颜色列表， total-length 为首尾色标距离。

2. 对每对相邻色标， weight 定义为两色标间距一半再除以 total-length。 向 list 加入两项， 第一项为将第一个色标颜色转为预乘 sRGBA 并乘以 weight， 第二项同理为第二个色标。

3. 将 list 所有项按分量相加，即为平均色并返回。

注： 一如既往，实现可任选算法， 只要结果与上述一致即可。

repeating-linear-gradient(red 0px, white 0px, blue 0px);

repeating-linear-gradient(red 0px, white .1px, blue .2px);

3.4. 定义渐变颜色

渐变中的颜色通过色标（一个 <color> 及其在渐变线上的对应位置） 和颜色过渡提示（在两个色标之间，表示颜色过渡中点的位置） 指定，二者都放在 渐变线 上， 共同定义该线上每一点的颜色。 （每个渐变函数定义了 渐变线 的形状和长度， 以及其起点和终点；见上文。）

渐变区域中的颜色通过与 渐变线上的特定点关联确定， 这些点由渐变函数指定。 UA 可以对渐变颜色进行轻微“抖动” （将单个像素随机替换为渐变线附近的其它颜色） 以实现更平滑的渐变。

3.4.1. 色标列表

色标和过渡提示 在色标列表中指定， 即由两个或更多色标与可选的 过渡提示交错排列而成的列表：

<color-stop-list> =
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> <length-percentage>?
<linear-color-hint> = <length-percentage>

百分比值以 渐变线的长度为基准， 从起点到终点， 0% 位于起点， 100% 位于终点。 长度值从渐变线的起点出发，沿终点方向测量。

色标和过渡提示的位置 通常放在 起点和终点之间， 但不是强制的： 渐变线向两侧无限延展， 可以在渐变线上的任意位置指定。

当色标的位置被省略时， 会自动分配一个位置。 色标列表中的第一个和最后一个色标， 分别分配到渐变线的起点或终点。 其他未指定位置的色标， 会被分配到两侧已定位色标的中点。 若有多个连续未指定位置的色标， 它们会在两侧已定位色标之间平均分布。 详情见 § 3.4.3 色标“修正”。

3.4.2. 渐变线着色

在每个色标位置， 渐变线采用该色标的颜色。 在第一个色标之前， 渐变线采用第一个色标的颜色； 在最后一个色标之后， 渐变线采用最后一个色标的颜色。 在两个色标之间， 渐变线的颜色在两色标之间做插值， 插值空间为预乘 RGBA 空间。

默认情况下， 该插值为线性——即在两个色标间 25%、50%、75% 距离处， 颜色分别为两色标颜色的 25%、50%、75% 混合。

但如果在两个色标间指定了过渡提示， 则插值为非线性，由提示控制：

注： 过渡提示指定“中间色”（两色标间 50% 混合色）的位置。 当提示正好在两色标中点时， 上述插值算法结果与线性插值一致。 若提示在其他位置， 则会产生平滑的指数曲线， 且“中间色”恰好出现在提示指定处。

需要补充一个使用颜色提示的视觉示例。

如果多个色标位置相同， 则会产生从列表中靠前到靠后色标的瞬时跳变。 实际效果是在该位置颜色瞬间变化，而非平滑过渡。

linear-gradient(90deg, red, transparent, blue)

3.4.3. 色标“修正”

在解析每个使用值的色标位置时， 必须按顺序执行以下步骤：

1. 如果第一个色标没有位置， 设为 0%。 如果最后一个色标没有位置， 设为 100%。
2. 如果某个色标或过渡提示的位置 小于列表中前面任何色标或过渡提示的已指定位置， 则将其位置设为前面所有色标或过渡提示的最大位置。
3. 如果仍有色标没有位置， 则对于每组连续未指定位置的色标， 将它们均匀分布在前后已定位色标之间。

应用完这些规则后， 所有色标和过渡提示都将有明确的位置与颜色， 且它们按位置递增排列。

注： 建议作者在混用不同单位（如 px、em、%）时谨慎， 否则可能导致色标意外移到前一个色标之前。 例如， 规则 background-image: linear-gradient(yellow 100px, blue 50%) 当背景区域至少 200px 高时不会触发修正。 如果高度为 150px， 蓝色色标位置等价于 75px， 会比黄色色标更靠前， 此时位置会被修正为 100px。 此外，由于这类色标的相对顺序需要布局后才能确定， 它们不会在动画或过渡中平滑插值。

1. linear-gradient(red, white 20%, blue)
   =1=>
   linear-gradient(red 0%, white 20%, blue 100%)

2. linear-gradient(red 40%, white, black, blue)
   =1,3=>
   linear-gradient(red 40%, white 60%, black 80%, blue 100%)

3. linear-gradient(red -50%, white, blue)
   =1,3=>
   linear-gradient(red -50%, white 25%, blue 100%)

4. linear-gradient(red -50px, white, blue)
   =1,3=>
   linear-gradient(red -50px, white calc(-25px + 50%), blue 100%)

5. linear-gradient(red 20px, white 0px, blue 40px)
   =2=>
   linear-gradient(red 20px, white 20px, blue 40px)

6. linear-gradient(red, white -50%, black 150%, blue)
   =1,2=>
   linear-gradient(red 0%, white 0%, black 150%, blue 150%)

7. linear-gradient(red 80px, white 0px, black, blue 100px)
   =2,3=>
   linear-gradient(red 80px, white 80px, black 90px, blue 100px)

4. CSS 中图片与对象的尺寸

CSS 中使用的图片可以来自多种来源： 二进制图片格式（如 gif、jpeg 等）， 专用标记格式（如 SVG）， 以及 CSS 特有格式（如本规范定义的 linear-gradient() 值类型）。 此外，文档还可以包含许多其他类型的对象， 比如视频、插件或嵌套文档。 这些图片和对象 （下文统称为 对象） 可能为 CSS 提供多种尺寸信息，也可能完全没有。 本节泛化定义对象与 CSS 布局算法之间的尺寸协商模型。

4.1. 对象尺寸术语

为定义此处理方式， 我们先定义一些术语， 以便更方便地引用相关概念：

自然尺寸

自然尺寸 指的是 自然高度、自然宽度 和 自然宽高比（宽度与高度的比值）的集合， 这三者每一个对于某个对象来说可能存在也可能不存在。 这些自然尺寸表示对象本身固有的首选大小； 即，它们不取决于对象所处环境。 CSS 不规定一般如何获取自然尺寸。

光栅图片是拥有全部三种自然尺寸的对象的例子。 设计为可缩放的 SVG 图片可能只有自然宽高比； SVG 图片也可以只定义自然宽度或高度。 本规范定义的 CSS 渐变，是没有自然尺寸的对象的例子。 另一个例子是嵌入文档， 如 HTML 的 iframe 元素。 许多 对象，如大多数图片， 不可能只拥有两项 自然尺寸， 因为任意两项自动决定第三项。 但某些替换元素类型， 如表单控件， 可以有 自然宽度 和 自然高度， 但没有 自然宽高比。

如果 对象 的 宽高比退化（即至少一项为零或无穷大）， 则视为没有 自然宽高比。

如果 对象（如图标）有多个尺寸， 则最大面积的尺寸作为其 自然尺寸。 若该尺寸有多个宽高比， 或没有尺寸但有多个宽高比， 则选择与默认对象尺寸最接近的宽高比。 判断方法为：看哪个宽高比在用 默认对象尺寸 以 contain 约束适配时面积最大； 若有多个面积最大，则选择最宽的作为 自然尺寸。

自然宽度和 自然高度合称为 自然大小。

指定尺寸

对象的指定尺寸由 CSS 给出， 比如通过 width 和 height 或 background-size 属性。 指定尺寸可以是确定的宽度和高度、 一组约束、 或两者组合。

具体对象尺寸

具体对象尺寸是 将 对象的 自然尺寸 与 指定尺寸 及其所处环境的 默认对象尺寸 结合计算， 得到一个具有绝对宽高的矩形。

默认对象尺寸

默认对象尺寸是一个具有绝对宽高的矩形， 用于在 自然尺寸 和 指定尺寸 都缺某个尺寸时，确定 具体对象尺寸。

4.2. CSS⇋对象协商

CSS 中的对象通过 对象尺寸协商 算法进行尺寸和渲染，流程如下：

1. 当文档中指定一个对象时， 比如在 background-image 属性中使用 url()， 或在 src 属性指定于 img 元素， CSS 会向对象查询其 自然尺寸。

2. 使用 自然尺寸、 指定尺寸 和对象所处环境的 默认对象尺寸， CSS 计算出 具体对象尺寸。 （见下一节。） 这决定了 对象渲染区域的尺寸与位置。

3. CSS 要求 对象按 具体对象尺寸 渲染自身。 CSS 不规定当 具体对象尺寸与 对象的 自然尺寸 不同时的渲染方式。 对象可以以某种方式自适应 具体对象尺寸， 甚至可以为满足自身的尺寸约束渲染得比 具体对象尺寸大或小。

4. 除非 CSS 另有规定， 对象会被裁剪到 具体对象尺寸 区域。

4.3. 具体对象尺寸求解

目前各个上下文中对象的尺寸规则 都在对应上下文分别描述。 本节定义了一些常见尺寸约束 及其求解方式， 以便后续规范可引用这些规则，无需每次重复定义尺寸求解。

4.3.1. 默认尺寸算法

默认尺寸算法 是一组常用于求解对象 具体对象尺寸的规则。 它同时处理 对象的 自然尺寸 和无约束指定尺寸或仅包含确定宽度/高度的指定尺寸。

有些对象的尺寸规则 （如 list-style-image） 正好等同于 默认尺寸算法。 其他情况 （如 border-image） 会在最终得到 具体对象尺寸前， 先应用其它尺寸规则后再调用默认尺寸算法。

默认尺寸算法定义如下：

• 如果 指定尺寸 是确定的宽度和高度， 则 具体对象尺寸 就是该宽高。

• 如果 指定尺寸 只指定了宽度或高度（但不是两者）， 则 具体对象尺寸 的该维度为指定值， 另一维的计算规则如下：

  1. 如果 对象有 自然宽高比， 则缺失的那一维按宽高比和已有维度推算。

  2. 否则，如果缺失的维度存在于对象的 自然尺寸中， 则取 对象的 自然尺寸。

  3. 否则，该维度取 具体对象尺寸 的 默认对象尺寸。

• 如果 指定尺寸 没有约束：

  1. 如果 对象有 自然高度或宽度， 则其尺寸按 自然尺寸 作为 指定尺寸 求解。

  2. 否则，其尺寸按 contain 约束适配 默认对象尺寸 计算。

4.3.2. cover 与 contain 约束尺寸

另有两种常见的指定尺寸：contain 约束和 cover 约束， 它们都针对指定的 约束矩形，结合对象的 首选宽高比 求解：

• contain 约束 的解法是 将 具体对象尺寸 设为 同时具有 对象 自然宽高比 并且宽高都不大于约束矩形宽高的最大矩形。

• cover 约束 的解法是 将 具体对象尺寸 设为 同时具有 对象 自然宽高比 并且宽高都不小于约束矩形宽高的最小矩形。

两种情况下， 若对象没有自然宽高比， 具体对象尺寸就是指定的约束矩形。

4.4. CSS 对象尺寸示例

4.5. 对象尺寸：object-fit 属性

object-fit 属性指定替换元素的内容如何适应由其实际高度和宽度确定的盒子。

fill

替换内容被拉伸至填满元素内容盒： 对象的具体对象尺寸即为元素的实际宽高。

contain

替换内容在保持其自然宽高比的同时适应元素内容盒： 其具体对象尺寸按元素的实际宽高作为contain 约束求解。

cover

替换内容在保持自然宽高比的同时填满整个元素内容盒： 其具体对象尺寸按元素的实际宽高作为cover 约束求解。

none

替换内容不会缩放以适应元素内容盒： 使用默认尺寸算法且无指定尺寸， 默认对象尺寸等于替换元素的实际宽高，来确定对象的具体对象尺寸。

scale-down

内容尺寸按 none 或 contain 的效果取较小的 具体对象尺寸。

注： none 和 contain 都会遵循内容的自然宽高比， 因此“更小”是有明确定义的。

如果内容未完全填充替换元素的内容盒， 空白部分会显示替换元素的背景。 替换元素总会将内容裁剪到内容盒内， 内容不会溢出。 如需定位对象见 object-position 属性。

注： object-fit 属性的语义类似于 [SMIL10] 中的 fit 属性，以及 <meetOrSlice> 参数 （用于 preserveAspectRatio 属性，见 [SVG11]）。

注： 按 对象尺寸协商 算法， 具体对象尺寸（或此处的内容尺寸） 并不直接缩放对象本身—— 它只是作为可见画布的尺寸传递给对象。 如何绘制由图片格式决定。 特别地，光栅图片总是缩放到给定尺寸， 而 SVG 则以给定尺寸作为“SVG 视口”大小（SVG 术语）， 并通过根 <svg> 元素的多个属性决定绘制方式。

4.6. 对象定位：object-position 属性

object-position 属性决定替换元素在其盒子内部的对齐方式。 <position> 值类型 （同样用于 background-position） 定义见 [CSS-VALUES-3]， 解析时以具体对象尺寸为对象区域， 以内容盒为定位区域。

注： 盒子未被替换元素覆盖的区域会显示其背景。

5. 图片处理

5.1. 页面图片方向：image-orientation 属性

如果用侧放的相机拍照， 或文档在扫描仪中位置不正， 得到的图片可能会“横着”甚至倒着显示。 image-orientation 属性提供了一种对图片源数据进行“带外”旋转以正确显示图像的方式。

此属性对实现来说是可选的。

该属性指定对元素图片应用正交旋转， 在图片用于文档前进行。 适用于内容图片 （如替换元素和生成内容） 以及 SVG 元素引用的图片源 （如 feImage）， 还包括通过 CSS 规则应用的装饰图片 （如 background-image 及其他 <image> 属性）。 不适用于文档外图片的渲染， 如 UA 导航栏或菜单中的 favicon 等。

注： 该属性不用于指定布局变换 （如任意旋转或水平/垂直翻转图片）。 （相关功能见 [CSS-TRANSFORMS-1]。） 也不用于在横向/纵向打印时自动旋转图片， 这种旋转属于布局处理。（参见 [CSS3PAGE]。） 该属性仅用于修正图片方向不正确的情况。

各值含义如下：

none

不应用额外旋转： 图片按其编码方式显示。

from-image

若图片元数据（如 EXIF）中指定了方向， 此值计算为元数据指定的正确朝向所需的角度。 若需要，该角度按 <angle> 的规则四舍五入归一化。 若元数据未指定方向， 此值计算为 none。

注： § 2.1.2 图片元数据 对可用元数据有一些限制。

<angle> || flip

正 <angle> 表示图片顺时针旋转， 负值表示逆时针旋转。 如果 <angle> 省略，默认 0deg。

若指定 flip， 则旋转后图片还会水平翻转。

该值仅对内容图片生效； 装饰图片行为仍为 from-image。 此值已废弃， 实现可选， 仅 [CSS-PRINT] 合规实现需支持。

注： 该值允许手动复现 from-image 可实现的全部 8 种 EXIF 方向。

该属性的计算值为 先将 <angle> 四舍五入到最接近的四分之一圈， 歧义时向正无穷舍入， 然后模 1turn（即归一到 [0turn, 1turn) 区间）。

除 none 和 from-image 外，其他值在 CSS 中为可选实现且已废弃。

所有 CSS 布局和渲染过程都以图片旋转后的结果为准， 效果等同于图片本身就是以该方向编码的。 例如：

• 图片的自然宽高， 取自旋转后的图片而非原始尺寸。

• height（宽度）属性作用于图片旋转后的垂直（水平）方向。

• 图片cursor的热点坐标相对于旋转后的图片。

• 边框图片（见 border-image）在旋转后切割。

• 其他变换（如 [CSS-TRANSFORMS-1]）在 image-orientation 应用后再应用。

img.ninety     { image-orientation: 90deg }
...
<img class="ninety" src=...>

注： 此属性之前的初始值为 none。 现认为初始值为 from-image 用户体验更佳且兼容性影响较小， 但后续 UA 实践会进一步验证。 若得到验证，则该属性未来可能会从 CSS 移除， 除非有除“修正图片方向”以外的用例提出。

5.2. 确定图片缩放方式：image-rendering 属性

image-rendering 属性为用户代理提供一个提示，说明在图片缩放时应优先保留哪些特性，以帮助用户代理选择合适的缩放算法。 当在元素上指定时，会应用于该元素所有图片相关属性中的图片，例如背景图片、列表样式图片，或作为图片需要缩放时的替换元素内容。 image-rendering 属性的各个值解释如下：

auto

缩放算法由用户代理决定。

smooth

图片应使用最大化视觉效果的算法缩放。尤其可以使用“平滑”颜色的缩放算法，例如双线性插值。适用于照片等图片。

high-quality

与 smooth 相同，但优先考虑更高质量的缩放。 如果系统资源受限，带有 high-quality 的图片应优先于其他值的图片，在考虑降级哪些图片及降级程度时。

此值不会阻止图片在系统资源紧张时被降级，只是表达这些图片应比 auto 图片获得更多的缩放资源。 如果页面上所有图片都用 high-quality，效果等同于都用 auto，都会被一视同仁。

要最大化利用 high-quality，只对页面最重要的图片使用此值。

pixelated

图片缩放时尽量保留原始的像素化风格，但当目标尺寸不是原始尺寸的整数倍时，可以做少量平滑以避免图像变形。

每个方向分别，先确定其最接近目标尺寸且大于零的原始尺寸的整数倍，先用最近邻算法缩放到该尺寸，再按 smooth 的方式继续缩放到目标尺寸。

注： 当目标尺寸为原始尺寸的整数倍时，该值效果等同于 crisp-edges。非整数倍时，通常视觉效果更好（即使是像素风格图），但由于“二步渲染”会有性能损耗。

crisp-edges

图片缩放时尽量保留对比度和边缘，避免平滑颜色或产生模糊，适用于线条画等图片。

可以用最近邻或其他不模糊边缘不混色的用户代理自选算法进行缩放。也可以检测斜线或曲线并平滑显示（而不是“锯齿状大像素”）。

注： 如果新尺寸不是原始尺寸的整数倍，最近邻算法可能会导致显著的“走样”问题：原图中等粗细的线在缩放后可能粗细不一等。因此多数情况下，pixelated 比 最近邻 更适合。

除了 pixelated 的第一步外，该属性不限定必须使用特定的缩放算法。 例如 image-rendering: auto 时，用户代理可以默认用双线性插值，也可以在高负载时切换为最近邻插值，或对静态不变图片用更高质量的算法如 Lanczos 插值。

例如，给定如下小图片：

将其放大 3 倍后，效果可能如下，取决于 image-rendering 的值：

如上例放大 3 倍时， pixelated 和纯 最近邻 效果完全一致。 在非整数倍缩放时， 效果则不同：

用 pixelated 版本维持了单纯放大像素的整体“风格”，但有轻微平滑，远小于 smooth 的模糊。而 最近邻 完全不引入模糊，但会有走样现象使“像素”大小不均匀。

该属性曾接受 optimizeSpeed 和 optimizeQuality 两个值。现已废弃；用户代理必须将它们视为有效值，但等同于 crisp-edges 和 smooth，作者不应使用。

6. 插值

本级未定义 <image> 值的插值方式。 实现必须直接跳变 （在过渡进度 50% 时切换，与其他不支持的插值类似）， 除非未来规范另有定义。

注： CSS Images Level 4 预计将为渐变定义专门插值，并规定所有其他图片通过淡入淡出插值。

7. 序列化

本节描述本规范中引入的所有新属性和值类型的序列化方式， 以便与 CSS 对象模型 [CSSOM] 交互。

要序列化本模块定义的任何函数， 按其各自语法序列化， 遵循语法顺序， 在不改变含义时可省略部分组件， 空格分隔的标记用单空格连接， 逗号后跟单空格。

Linear-Gradient( to bottom, red 0%,yellow,black 100px)

linear-gradient(red, yellow, black 100px)

隐私注意事项

本规范未引入新的隐私风险。

安全注意事项

本规范默认允许跨域图片渲染， 这会使这些图片的一些信息可通过编程方式获取——具体来说，是这些图片的 自然尺寸 和分辨率。

鸣谢

感谢 Webkit 团队、Brad Kemper、Brian Manthos 和 Alan Gresley 对渐变定义的贡献；感谢 Melinda Grant 对 object-fit、object-position 和 image-orientation 的工作； 以及 L. David Baron、 Kang-Hao Lu、Leif Arne Storset、Erik Dahlstrom 和 Øyvind Stenhaug 对本规范的细致评审、意见和修订。

变更

自 2019 年 10 月 10 日候选推荐 起的变更

自 2020 年 12 月 17 日 CRD 以来的重要变更：

• 移除 &&（允许重排）自 <linear-color-stop>。 （Issue 8021）

• 规定 pixelated 使用从 最近邻 到最近像素倍数的平滑缩放，避免变形。 （Issue 5837）

• 明确允许用 最近邻 实现 crisp-edges， 因为当前实现都是如此。 （Issue 6038）

• 语法产生式中的各种编辑/拼写修正。

自 2019 年 10 月 10 日 CR 以来的重要变更：

• 定义了退化宽高比的处理 （Issue 4572）

• 规定布局相关元数据若出现在图片数据之后应被忽略 （Issue 5165）

• 明确允许渐变色抖动 （Issue 4793）

• 规定 image-orientation 适用于装饰图片和内容图片 （Issue 5245）

• 将 “intrinsic dimensions” 改为 natural dimensions，避免与 intrinsic sizes 混淆。 （Issue 4961）

自 2012 年 4 月 17 日候选推荐 起的变更

主要变更包括：

• image() 语法推迟到 Level 4。

• image-resolution 属性推迟到 Level 4。

• image-orientation 属性被标记为废弃、可选且存在风险。此外：

  • 加入 from-image 和 none 关键字

  • 加入 flip 值

  • 交换为“模后取整”顺序。

• 加入 image-rendering 属性。

• 将 <resolution> 类型移至 [CSS-VALUES-3]。

• 更好地定义了无效和部分加载图片的处理。

• 定义了 <image> 的通用计算形式。

• 定义了作为图片或元素引用的 URL 歧义情况及处理。

• 规定 linear-gradient() 中零角度单位可省略以兼容。

• 略微明确了退化重复径向渐变的处理。

• 为 过渡提示 加入到 <color-stop-list>，并编辑重写渐变色标章节。

• 为所有属性定义表补充了“规范顺序”和“动画类型”项。

• 定义了 <image> 值的插值和序列化。

• 各种小幅澄清。

有 评论处理结果 可供查阅。