dynamic-range-limit

语法

/* Keyword values */
dynamic-range-limit: standard;
dynamic-range-limit: no-limit;
dynamic-range-limit: constrained;

/* dynamic-range-limit-mix() function */
dynamic-range-limit: dynamic-range-limit-mix(standard 70%, no-limit 30%);

/* Global values */
dynamic-range-limit: inherit;
dynamic-range-limit: initial;
dynamic-range-limit: revert;
dynamic-range-limit: revert-layer;
dynamic-range-limit: unset;

值

dynamic-range-limit 属性被指定为以下关键字值之一或 dynamic-range-limit-mix() 函数调用。

可以指定以下关键字值：

standard

将最大亮度指定为 HDR 参考白，即 CSS 颜色 white。

no-limit

将最大亮度指定为远大于 HDR 参考白。具体亮度级别未指定。

constrained

将最大亮度指定为略高于 HDR 参考白，以便可以舒适地一起查看标准动态范围 (SDR) 和 HDR 内容的混合。具体亮度级别未指定。

dynamic-range-limit-mix() 函数将最大亮度指定为一个自定义值，该值是不同关键字值与所提供百分比成比例的组合。它接受两对或更多对，每对都包含一个 dynamic-range-limit 关键字（或嵌套的 dynamic-range-limit-mix() 函数）和一个百分比。

描述

动态范围是内容最亮和最暗部分之间的亮度（亮度）差异。动态范围以摄影档位衡量，其中增加一个档位表示亮度加倍。

SDR、HDR 和余量

传统的 Web 内容使用标准动态范围 (SDR)，其中最亮的颜色等同于 CSS 颜色 white（十六进制为 #ffffff）。另一方面，高动态范围 (HDR) 内容的亮度可以超出标准白色。在 HDR 术语中，标准的 CSS white 也称为 HDR 参考白。

内容可以显示的最大亮度取决于内容、可用的显示硬件和用户偏好。白色最大亮度可以超过 HDR 参考白的量称为 HDR 余量，通常以摄影档位表示。

SDR 内容的 HDR 余量始终为 0，因为其最亮的白色就是 HDR 参考白。旧显示器也可能具有 0 的 HDR 余量，因为它们无法显示更亮的颜色。较新的显示器可能具有大于 0 的 HDR 余量，允许它们显示 HDR 内容中可用的更亮的颜色。

dynamic-range-limit 的用例

HDR 内容的亮度可能会让观看者感到刺眼。这在混合显示 HDR 和 SDR 内容的应用程序中尤其明显，导致亮度不一致。

dynamic-range-limit 属性允许您控制 HDR 内容的亮度。例如，您可能希望将照片或视频库中所有缩略图的最大亮度限制为 HDR 参考白（这就是 standard 关键字值的作用）或仅略高于 HDR 参考白的亮度（使用 constrained 关键字值或使用 dynamic-range-limit-mix() 创建的自定义限制）。当用户查看单个 HDR 图像，或者用户选择偏好以启用它时，您可以将图像的 dynamic-range-limit 设置为 no-limit。

正式定义

正式语法

dynamic-range-limit = 
  standard                     |
  no-limit                     |
  constrained                  |
  <dynamic-range-limit-mix()>  

<dynamic-range-limit-mix()> = 
  dynamic-range-limit-mix( [ <'dynamic-range-limit'> && <percentage [0,100]> ]#{2,} )  

<dynamic-range-limit> = 
  standard                     |
  no-limit                     |
  constrained                  |
  <dynamic-range-limit-mix()>  

示例

dynamic-range-limit 的基本用法

在我们的 dynamic-range-limit 属性演示中，我们包含了一个 HDR 图像，可以通过悬停和聚焦来转换 dynamic-range-limit 值。在能够显示 HDR 颜色的显示器中查看实时示例，并尝试一下。代码解释如下。

HTML

在标记中，我们使用 <img> 元素嵌入了一个 HDR 图像。我们包含了一个 tabindex 值为 0，以使图像可以通过键盘聚焦。

<img
  src="gioia-pixel-ultrahdr.jpg"
  alt="A subway station, with white strip lights lighting the platform and ad posters in the background"
  tabindex="0" />

CSS

我们为 <img> 元素提供了一些基本样式，然后将其 dynamic-range-limit 属性设置为 standard，这意味着它不会显示得比 HDR 参考白更亮。我们还设置了一个 transition 属性，以便在 <img> 元素的状态改变时，其 dynamic-range-limit 值将在 0.6 秒内过渡。

img {
  width: 50%;
  border: 1px solid black;
  dynamic-range-limit: standard;
  transition: dynamic-range-limit 0.6s;
}

在悬停或聚焦时，我们将 <img> 元素的 dynamic-range-limit 值更改为 no-limit，以便它将显示为浏览器和显示设置允许的最大亮度。

img:hover,
img:focus {
  dynamic-range-limit: no-limit;
}

规范

浏览器兼容性

另见

dynamic-range 和 video-dynamic-range 媒体特性