dynamic-range-limit-mix()

语法

dynamic-range-limit-mix(standard 70%, no-limit 30%);
dynamic-range-limit-mix(no-limit 10%, constrained 20%);
dynamic-range-limit-mix(no-limit 30%, constrained 30%, standard 30%);
dynamic-range-limit-mix(
    no-limit 20%,
    dynamic-range-limit-mix(standard 25%, constrained 75%) 20%
)

参数

dynamic-range-limit <percentage>

由 dynamic-range-limit 值（可以是另一个 dynamic-range-limit-mix() 函数）和介于 0% 到 100%（含）之间的 <percentage> 组成的一对。<percentage> 指定了自定义限制中 dynamic-range-limit 关键字值的比例。dynamic-range-limit-mix() 函数可以接受两个或更多这样的对作为参数。

返回值

一个自定义的最大亮度限制，表示为比 HDR 参考白色高出多少个摄影光圈值。出于隐私原因，实际计算结果不会公开。

描述

dynamic-range-limit 属性允许你控制高动态范围（HDR）内容的亮度。dynamic-range-limit-mix() 函数可以作为 dynamic-range-limit 的值提供，它允许你通过混合 dynamic-range-limit 关键字值的百分比来创建自定义亮度限制。

计算百分比

当给定的百分比加起来等于 100% 时，结果是显而易见的。

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

当给定的百分比不等于 100% 时，结果百分比等于给定百分比彼此成比例地表示，以便总和等于 100%。

/* no-limit 40%, constrained 60% */
dynamic-range-limit-mix(no-limit 20%, constrained 30%);

/* no-limit 20%, constrained 40%, standard 40% */
dynamic-range-limit-mix(no-limit 40%, constrained 80%, standard 80%);

如果 dynamic-range-limit 关键字值使用多次，则该关键字值的百分比将相加得到总百分比。

/* constrained 70%, standard 30% */
dynamic-range-limit-mix(constrained 40%, standard 30%, constrained 30%);

/* no-limit 40%, constrained 60% */
dynamic-range-limit-mix(no-limit 10%, constrained 30%, no-limit 10%);

如果指定的百分比小于 0% 或大于 100%，则 dynamic-range-limit-mix() 函数（以及因此关联的 dynamic-range-limit 属性值）无效。如果一个关键字使用多次且累积百分比超过 100%，则该值有效，并且上面描述的比例规则将发挥作用。

嵌套 dynamic-range-limit-mix() 函数

你可以将 dynamic-range-limit-mix() 函数相互嵌套。这样做时，前面解释的相同规则适用，并且每组百分比都是单独计算然后相加。在下面的示例中

dynamic-range-limit-mix(
    no-limit 10%,
    dynamic-range-limit-mix(standard 25%, constrained 75%) 20%,
    dynamic-range-limit-mix(constrained 10%, no-limit 30%) 20%
)

• 第一行给出 no-limit 10%。
• 由于 25% 和 75% 加起来等于 100%，因此第二行给出 standard 5%（20% 的 25%）和 constrained 15%（20% 的 75%）。
• 在第三行中，由于 10% 和 30% 加起来仅为 40%，而不是 100%，我们将两者归一化为 40% 的比例：10/40 = 25% 和 30/40 = 75%。这给我们 constrained 5%（20% 的 25%）和 no-limit 15%（20% 的 75%）。

将这些相加得到原始百分比

dynamic-range-limit-mix(standard 5%, constrained 20%, no-limit 25%)

上面的百分比加起来等于 50%，因此需要将它们翻倍才能得到最终百分比。因此，计算值是

dynamic-range-limit-mix(standard 10%, constrained 40%, no-limit 50%)

正式语法

<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()>  

示例

基本用法

考虑一个用于在网页上嵌入 HDR 图像的 <img> 元素。

<img src="my-hdr-image.jpg" alt="my image" />

在 HDR 显示器上，图像中最亮的区域可能会显得刺眼和不舒服。为了解决这个问题，我们可以将图像的 dynamic-range-limit 属性设置为 dynamic-range-limit-mix(standard 70%, no-limit 30%)，这使其最大亮度限制仅比 HDR 参考白色稍亮。

img {
  dynamic-range-limit: dynamic-range-limit-mix(standard 70%, no-limit 30%);
}

你可以在我们的 dynamic-range-limit 属性演示中看到 dynamic-range-limit 属性的实际应用，其中包括一个 HDR 图像，可以通过悬停和聚焦来转换 dynamic-range-limit 值。在能够显示 HDR 颜色的显示器上在线查看示例并试用它。

规范

浏览器兼容性

另见

• dynamic-range-limit