dynamic-range-limit-mix()

Die dynamic-range-limit-mix() CSS Funktion erstellt ein benutzerdefiniertes maximales Luminanzlimit, indem sie verschiedene dynamic-range-limit Schlagwörter in angegebenen Mengen mischt.

Syntax

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

Parameter

dynamic-range-limit <percentage>

Ein Paar bestehend aus einem dynamic-range-limit-Wert (der eine andere dynamic-range-limit-mix()-Funktion sein kann) und einem <percentage> zwischen 0% und 100% (einschließlich). Das <percentage> gibt den Anteil eines dynamic-range-limit-Schlüsselwortwerts im benutzerdefinierten Limit an. Die dynamic-range-limit-mix()-Funktion kann zwei oder mehr dieser Paare als Parameter aufnehmen.

Rückgabewert

Ein benutzerdefiniertes maximales Luminanzlimit, ausgedrückt als eine Anzahl von fotografischen Blendenstufen über dem HDR-Referenzweiß. Aus Datenschutzgründen wird das tatsächlich berechnete Ergebnis nicht offengelegt.

Beschreibung

Die Eigenschaft dynamic-range-limit ermöglicht es Ihnen, die Helligkeit von High Dynamic Range (HDR)-Inhalten zu kontrollieren. Die dynamic-range-limit-mix()-Funktion kann als Wert von dynamic-range-limit bereitgestellt werden und ermöglicht es Ihnen, benutzerdefinierte Helligkeitslimits zu erstellen, indem Prozentsätze der dynamic-range-limit-Schlüsselwortwerte gemischt werden.

Berechnung der Prozentsätze

Wenn die angegebenen Prozentsätze 100% ergeben, ist das Ergebnis offensichtlich:

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

Wenn die angegebenen Prozentsätze nicht 100% ergeben, entsprechen die resultierenden Prozentsätze den angegebenen Prozentsätzen, die proportional zueinander ausgedrückt werden, sodass die Summe 100% ergibt:

/* 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%);

Wenn ein dynamic-range-limit-Schlüsselwortwert mehrmals verwendet wird, werden die Prozentsätze für diesen Schlüsselwortwert addiert, um den Gesamtprozentsatz zu erhalten:

/* 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%);

Wenn ein angegebener Prozentsatz weniger als 0% oder mehr als 100% beträgt, ist die dynamic-range-limit-mix()-Funktion - und damit der zugehörige Wert der dynamic-range-limit-Eigenschaft - ungültig. Wenn ein Schlüsselwort mehrmals verwendet wird und der kumulierte Prozentsatz mehr als 100% beträgt, ist der Wert gültig, und die oben beschriebenen Verhältnisse werden angewendet.

Verschachteln von dynamic-range-limit-mix()-Funktionen

Sie können dynamic-range-limit-mix()-Funktionen ineinander verschachteln. Wenn Sie dies tun, gelten die zuvor erläuterten Regeln, und jeder Satz von Prozentsätzen wird separat berechnet und dann hinzugefügt. Im folgenden Beispiel:

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

• Die erste Zeile ergibt no-limit 10%.
• Da 25% und 75% zusammen 100% ergeben, ergibt die zweite Zeile standard 5% (25% von 20%) und constrained 15% (75% von 20%).
• In der dritten Zeile, da 10% und 30% nur 40% ergeben, nicht 100%, normalisieren wir beide als Anteile von 40%: 10/40 = 25% und 30/40 = 75%. Dies ergibt constrained 5% (25% von 20%) und no-limit 15% (75% von 20%).

Die Addition dieser Werte ergibt die Rohprozentsätze:

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

Die obigen Prozentsätze ergeben zusammen 50%, daher müssen sie verdoppelt werden, um die endgültigen Prozentsätze zu erhalten. Der berechnete Wert ist daher:

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

Formale Syntax

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

Beispiele

Grundlegende Nutzung

Betrachten Sie ein <img>-Element, das verwendet wird, um ein HDR-Bild auf einer Webseite einzubetten:

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

Auf HDR-Displays könnten die hellsten Bereiche des Bildes als unangenehm und störend empfunden werden. Um dieses Problem zu lösen, könnten wir die Eigenschaft dynamic-range-limit des Bildes auf dynamic-range-limit-mix(standard 70%, no-limit 30%) setzen, was ihm ein maximales Luminanzlimit von nur etwas heller als HDR-Referenzweiß gibt:

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

Sie können die dynamic-range-limit-Eigenschaft in unserer dynamic-range-limit-Eigenschaft Demonstration in Aktion sehen, die ein HDR-Bild enthält, das beim Überfahren und Fokussieren den dynamic-range-limit-Wert ändert. Sehen Sie das Beispiel live auf einem Display, das HDR-Farben anzeigen kann, und probieren Sie es aus.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• dynamic-range-limit