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 媒體特性