Kürzlich wurde ich gebeten, eine Zielseite zu korrigieren. In seinem Code fand ich unter anderem ein Bild, auf dem sich zwei überlappende durchscheinende Elemente befanden. Beide mit denselben RGB-Farbwerten in der Eigenschaft background-color. Es sah ungefähr so aus:<img src='myImage.jpg'/>
<div class='over1'></div>
<div class='over2'></div>
Es war nicht erforderlich, zwei solche Elemente zu verwenden. Dies könnte erforderlich sein, es sei denn, nur ein solches Element hat das Bild nicht ausreichend getönt. Aus irgendeinem Grund entschied der Autor der Seite, dass das Hinzufügen eines weiteren durchscheinenden Elements, das dem Bild überlagert ist, besser ist als das Erhöhen des Werts des opacityersten Parameters . Aus diesem Grund habe ich beschlossen, eine der Ebenen zu entfernen und den Parameter der verbleibenden Ebene so einzustellen , dass das externe Bild genauso aussieht wie das vorherige. Das alles ist gut, aber es stellte sich die Frage: Wie kann der Parameter des verbleibenden Elements so angepasst werden, dass das Ergebnis das gleiche ist wie beim Auftragen von zwei durchscheinenden Schichten?
opacityopacityWenn Sie diesen Artikel über die Zusammensetzung von Masken lesen , haben Sie möglicherweise bereits erraten, wie Sie den geeigneten Wert auswählen können. Immerhin wird hier die gleiche Formel verwendet, die dort für die Zusammensetzung von durchscheinenden Elementen verwendet wurde mask-composite: add. Wenn zwei Ebenen mit Transparenzwerten gleich a0und vorhanden sind a1, wird der Wert des resultierenden Indikators wie folgt berechnet:a0 + a1 - a0*a1
Hier finden Sie eine interaktive Demo, in der Sie vergleichen können, wie das Bild aussieht. Sie wird mit zwei Ebenen getönt, deren Eigenschaften opacity( a0und a1) mithilfe von Schiebereglern gesteuert werden können, und dasselbe Bild wird mit einer Ebeneneigenschaft getönt, opacitydie gemäß der Formel berechnet wird a0 + a1 — a0*a1.Die Optionen zum Abtönen eines Bildes, von denen zwei Kopien nebeneinander angezeigt werden.Es ist interessant, dass die Bereiche, in denen sich zwei durchscheinende Elemente befinden, und ein solches Element gleich aussehen, wenn das Bild darunter nicht angezeigt wird (Sie können die Bildausgabe über das Kontrollkästchen deaktivieren befindet sich am unteren Bildschirmrand). Wenn jedoch ein Bild unter diesen Ebenen angezeigt wird, unterscheiden sich die beiden Optionen geringfügig. Vielleicht ist dieser Unterschied nur das Ergebnis einer optischen Täuschung, vielleicht erscheinen mir einige Teile der Bilder heller oder dunkler als sie wirklich sind.Sie sehen definitiv nicht anders aus, wenn Sie sie nicht nebeneinander anzeigen, sondern einfach zwischen zwei Ebenen wechseln, deren Eigenschaftswerteopacitygleicha0und sinda1und eine Schicht, deren Wert opacitydurch die Formel ermittelt wird a0 + a1 — a0*a1. Hier ist ein relevantes Beispiel.Optionen zum Abtönen des Bildes mit der Möglichkeit, zwischen einer und zwei durchscheinenden Ebenen zu wechseln.Dieses Beispiel kann auf mehrere Ebenen erweitert werden. Berechnen Sie in diesem Fall zunächst die Transparenz der neuen Ebene, die der Transparenz der beiden unteren Ebenen entspricht. Suchen Sie dann die Transparenz der Ebene, die der Transparenz der neuen Ebene entspricht, und die Ebene unmittelbar darüber. Dieser Vorgang wird wiederholt, bis alle Schichten verarbeitet wurden.Reduzieren mehrerer durchscheinender Schichten auf eine Schicht Beiähnlichen Experimenten habe ich darüber nachgedacht, wie die Parameter eines undurchsichtigen Hintergrundbilds berechnet werden können, das einer undurchsichtigen Schicht (c0) und einer überlagerten durchscheinenden Schicht (c1deren Transparenz auf eingestellt ista) entspricht. In diesem Fall kann das endgültige Bild, das eine einzelne Schicht ist, durch Verarbeiten des Originalbilds Kanal für Kanal gefunden werden, während die Farbwerte der resultierenden Kanäle nach der folgenden Formel berechnet werden:ch0 + (ch1 - ch0)*a
Hier ch0ist der Kanal , der opaken Unterschicht ( red, greenoder blue- für Rot, Grün und Blau), ch1wird der entsprechende Kanal der oberen durchlässige Schicht, und die Anzeige aist eine Anzeige , die Mengen der Transparenz der gleichen scheinende Schicht.Wenn Sie diese Argumente in Form von SCSS-Code ausdrücken, erhalten Sie Folgendes:
@function res-ch($ch0, $ch1, $a) {
@return $ch0 + ($ch1 - $ch0)*$a
}
@function res-col($c0, $c1, $a) {
$ch: 'red' 'green' 'blue';
$nc: length($ch);
$ch-list: ();
@for $i from 0 to $nc {
$fn: nth($ch, $i + 1);
$ch-list: $ch-list,
res-ch(call($fn, $c0), call($fn, $c1), $a);
}
@return RGB($ch-list)
}
Hier ist ein interaktives Beispiel. Wenn Sie damit experimentieren, können Sie vergleichen, wie die beiden Ebenen aussehen und wie sie als einzelne Ebene dargestellt werden. Hier können Sie die RGB-Farbwerte von zwei Ebenen sowie die Transparenzstufe der zweiten Ebene auswählen.Ergebnisse beim Anwenden einer durchscheinenden Ebene auf eine undurchsichtige EbeneJe nach Gerät, Betriebssystem und Browser sehen Sie, dass die Farbfelder in diesem Beispiel gleich aussehen ... oder nicht. Die Formel ist korrekt, aber wie genau die beiden Quellenebenen in unterschiedlichen Umgebungen verarbeitet werden, kann variieren.Der linke Teil des Bildes ist das erwartete Ergebnis der Reduzierung von zwei Ebenen auf eine. Die rechte Seite zeigt, wie beim Kombinieren von zwei Ebenen (vom oberen rechten Teil des Bildes) die unten rechts gezeigte Ebene anders aussehen kann als erwartet.Ich habe Twitter-Benutzer gebeten, mir Screenshots mit einer vereinfachten Testversion dieses Beispielszu senden. Nach dem Feedback, das ich erhalten habe, scheinen die beiden Panels in mobilen Browsern (sowohl Android und iOS) als auch im Firefox-Browser unabhängig vom Betriebssystem immer gleich auszusehen. Fast immer sehen Panels unter Windows gleich aus, obwohl ich Antworten erhielt, die darauf hinweisen, dass Chrome und Chromium Edge Panels manchmal anders rendern als erwartet.Wenn wir über WebKit-basierte Browser sprechen, die unter MacOS und Linux ausgeführt werden, können wir feststellen, dass die Ergebnisse sehr heterogen sind. In den meisten Fällen unterscheidet sich die Farbe der Paneele geringfügig. Durch die Verwendung des sRGB-Farbprofils sehen die Bedienfelder jedoch gleich aus. Das Interessanteste beginnt, wenn dieses Beispiel in einem System betrachtet wird, das zwei Monitore verwendet. Das Ziehen eines Fensters von einem Monitor auf einen anderen kann dazu führen, dass der Unterschied zwischen den Bedienfeldern entweder sichtbar oder nicht sichtbar ist.Es ist zu beachten, dass in realen Szenarien der Unterschied sehr gering ist und dass ein Paar solcher Panels wahrscheinlich nicht nebeneinander liegt. Aber selbst wenn es einen Unterschied gibt, wird niemand davon erfahren, bis er die Seite in verschiedenen Umgebungen testet. In jedem Fall kann dies wahrscheinlich nur ein Webentwickler tun. Darüber hinaus besteht das Gefühl, dass die Farben gewöhnlicher undurchsichtiger Elemente auch bei Verwendung unterschiedlicher Geräte, Betriebssysteme und Browser unterschiedlich aussehen können. Zum Beispiel #ffa800sieht die Farbe , die auf css-tricks.com weit verbreitet ist, auf meinen Laptops mit Ubuntu und Windows anders aus. Schließlich können die Augen verschiedener Menschen dieselben Farben auf unterschiedliche Weise wahrnehmen.Liebe Leser! Haben Sie Probleme mit verschiedenen Browsern, Betriebssystemen oder Geräten, die unterschiedliche Farben von Webseiten anzeigen?