Ich habe zwei Bilder, von denen eines ein kleines Symbol ist, das über das erste Bild gelegt wird. Mein Symbol hat einen weißen Hintergrund. Wenn das Symbol über dem anderen Bild platziert wird, erhalten wir diesen Effekt, wenn ein weißes Quadrat über dem Bild erscheint. Im Idealfall möchte ich diesen weißen Hintergrund nicht über meinem anderen Bild anzeigen. Gibt es eine CSS-Eigenschaft, die ich auf mein Symbol anwenden kann, um den weißen Hintergrund transparent zu machen?
Tatsächlich gibt es einen Weg, obwohl momentan nur Chrome, Firefox und Safari unterstützt werden. Wenn die Hintergrundfarbe weiß ist, können Sie die CSS-Eigenschaft hinzufügen:
%Vor%Sie können mehr darüber hier lesen: Ссылка
Nein. Noch nicht ...
Es wird jedoch sehr nahe an möglich, . Lesen Sie diesen Artikel über CSS-Filter, ein experimentelles CSS-Feature, das einige Dinge auf der Client-Seite erledigt, die ordentlich sind.
mix-blend-mode funktioniert bei einigen Browsern, aber wir haben festgestellt, dass es in Chrome zu Leistungsproblemen kommt, ich habe keine Ahnung warum .
There ist dieser geniale Hack, bei dem Sie eine Ebene erstellen, die größtenteils transparent ist, aber wenn sie über einen weißen Hintergrund gelegt wird, wird ihre Farbe der Farbe des umgebenden Hintergrunds entsprechen.
Ich kann mich nicht erinnern, wo wir den Hack gefunden haben. Wenn jemand weiß, wo er veröffentlicht wurde, lassen Sie es mich bitte in den Kommentaren wissen
Wie diese "magische" Farbe gefunden wird; wird berechnet, um wie viel dunkler jede Farbachse für die Menge der entfernten Opazität sein sollte. Die Formel hierfür lautet
255 - ( 255 - x ) / opacity. Das Problem ist: Wenn die Deckkraft zu niedrig eingestellt ist, gibt die Formel negative Zahlen (die nicht verwendet werden können). Wenn die Deckkraft zu hoch ist, erhalten Sie etwas Farbe auf den nicht-weißen Teilen Ihres Bildes Anfangs verwendeten wir eine Tabelle, die die Berechnungen durchführen würde und durch manuelle Versuch und Irrtum fanden wir, dass Goldilox Farbe Als wir anfingen, Sass zu benutzen, erkannte ich, dass dies mit einer binären Suche erreicht werden kann. Also habe ich eine Sass-Funktion erstellt, die die Arbeit für uns erledigt.
Sehen Sie sich diese Liste auf Sassmeister . Übergeben Sie Ihre Hintergrundfarbe an die Funktion opacitator in Zeile 56 des Sass-Codes. und verwende die generierte rgba-Farbe in einem div (oder einem Pseudo-Element), um das Bild zu überlagern.