dynamic-range-limit-mix()

Experimentell:Dies ist eineexperimentelle Technologie
Überprüfen Sie dieBrowser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Diedynamic-range-limit-mix()CSS Funktion erstellt ein benutzerdefiniertes maximales Leuchtkraft-Limit, indem sie verschiedenedynamic-range-limit Schlüsselwörter in angegebenen Mengen mischt.

Syntax

css

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 einemdynamic-range-limit Wert (der auch eine anderedynamic-range-limit-mix() Funktion sein kann) und einem<percentage> zwischen0% und100% (einschließlich). Das<percentage> gibt den Anteil einesdynamic-range-limit Schlüsselwortwerts im benutzerdefinierten Limit an. Diedynamic-range-limit-mix() Funktion kann zwei oder mehr dieser Paare als Parameter übernehmen.

Ein benutzerdefiniertes maximales Leuchtkraft-Limit, ausgedrückt als eine Anzahl fotografischer Blendenstufen höher als das HDR-Referenzweiß. Aus Datenschutzgründen wird das tatsächlich berechnete Ergebnis nicht offengelegt.

Beschreibung

Diedynamic-range-limit Eigenschaft ermöglicht es Ihnen, die Helligkeit von High Dynamic Range (HDR)-Inhalten zu steuern. Diedynamic-range-limit-mix() Funktion kann als Wert vondynamic-range-limit angegeben werden und ermöglicht es Ihnen, benutzerdefinierte Helligkeitslimits zu erstellen, indem Sie Prozentsätze derdynamic-range-limit Schlüsselwertbegriffe miteinander mischen.

Prozentberechnung

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

css

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

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

css

/* 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 eindynamic-range-limit Schlüsselwert mehr als einmal verwendet wird, werden die Prozentsätze für diesen Schlüsselwert zusammengezählt, um den Gesamtprozentsatz zu erhalten:

css

/* 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 als0% oder mehr als100% beträgt, ist diedynamic-range-limit-mix() Funktion — und somit der zugehörigedynamic-range-limit Eigenschaftswert — ungültig. Wenn ein Schlüsselwort mehr als einmal verwendet wird und der kumulative Prozentsatz mehr als100% beträgt, ist der Wert gültig, und die oben beschriebenen Proportionsregeln kommen zur Anwendung.

Verschachtelung von`dynamic-range-limit-mix()` Funktionen

Sie könnendynamic-range-limit-mix() Funktionen ineinander verschachteln. Dabei gelten die gleichen Regeln wie zuvor beschrieben, und jede Menge an Prozentsätzen wird separat berechnet und dann addiert. Im folgenden Beispiel:

css

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 ergibtno-limit 10%.
Da25% und75% zusammen100% ergeben, ergibt die zweite Zeilestandard 5% (25% von20%) undconstrained 15% (75% von20%).
In der dritten Zeile, da10% und30% nur40% ergeben, normalisieren wir beide als Anteile von40%: 10/40 =25% und 30/40 =75%. Dies ergibtconstrained 5% (25% von20%) undno-limit 15% (75% von20%).

Das Addieren dieser ergibt die rohen Prozentsätze:

css

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

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

css

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 Verwendung

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

html

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

Auf HDR-Bildschirmen können die hellsten Bereiche des Bildes störend und unbequem zu betrachten sein. Um dieses Problem zu lösen, könnten wir diedynamic-range-limit Eigenschaft des Bildes aufdynamic-range-limit-mix(standard 70%, no-limit 30%) setzen, was ihm ein maximales Leuchtkraft-Limit gibt, das nur geringfügig heller als das HDR-Referenzweiß ist:

css

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

Sie können diedynamic-range-limit Eigenschaft in unsererdynamic-range-limit property demo in Aktion sehen, die ein HDR-Bild enthält, das fokussiert und gehoben werden kann, um dendynamic-range-limit Wert zu ändern.Sehen Sie das Beispiel live auf einem Display, das in der Lage ist, HDR-Farben anzuzeigen, und probieren Sie es aus.