Ich habe versucht, eine Lösung zu testen, die ich bezüglich der Überlagerung von Bildern gefunden habe, aber in meinem Beispiel hat keine funktioniert. Wie bewerkstelligen Sie dies auf die am wenigsten komplizierte Weise?
“Aber das Bild ist nicht wie erwartet “getönt”. und was erwartest du?
– Paolo Forgia
12. Mai 2017 um 13:27 Uhr
lxtazz
Ich habe einige kombinierte Filter verwendet, um ein Bild vollständig zu tönen. Tönung ist nicht direkt möglich (mit Filtern), aber man kann es sepia malen, Sättigung und Helligkeit anpassen und per Hue-Rotate die gewünschte Farbe bekommen… Ich glaube, es war so etwas …
Sehr ausführliche Erklärung hier: stackoverflow.com/a/43960991/4767533. Und hier ein CodePen aus einer der Antworten, der Ihnen die CSS-Filter gibt, die Sie für jeden Hex-Wert verwenden müssen: codepen.io/sosuke/pen/Pjoqqp.
Ich habe versucht, Ihr Beispiel an meinen Fall anzupassen, aber es funktioniert nicht wirklich. jsfiddle.net/6ELSF/1049 Ich möchte, dass es beim Schweben getönt wird …
– Palmi
12. Mai 2017 um 13:39 Uhr
@Palmi In deiner Geige benutzt du nicht opacity beim Schweben deshalb sein überlappendes Bild.
– Abhishek Pandey
12. Mai 2017 um 13:42 Uhr
@Pete Again, wenn ich es mit meiner Farbe versuche, überlappt es sich jsfiddle.net/6ELSF/1051
– Palmi
12. Mai 2017 um 13:44 Uhr
@palmi verwendete Hintergrundfarbe mit rgba()
– Mukesh Ram
12. Mai 2017 um 13:45 Uhr
Auch hier müssen Sie @palmi etwas Deckkraft verwenden – verwenden Sie entweder ein RGBA wie die vorherige Geige oder fügen Sie etwas hinzu opacity:0.5
– Peter
12. Mai 2017 um 13:45 Uhr
Dies erreichen Sie mit mix-blend-mode was aktuell hat ~88% Unterstützung. Sie können dasselbe Markup wie zuvor verwenden.
Für diese Demo möchten Sie Weißtöne in Richtung Ihrer gewählten Farbe tönen, damit Sie die verwenden möchten multiply Mischmodus. Wenn Sie Schwarz tönen möchten, verwenden Sie die screen Mischmodus.
Das Ändern der Deckkraft des übergeordneten Containers ändert alle untergeordneten Container. Erstellen Sie ein separates Div, um Ihren Farbton zu steuern. Ich habe etwas zusammengehämmert, aber das Wesentliche ist da.
Es ist nicht gerade ein echter Farbton, aber so finde ich es einfacher, eine Farbschicht über einem Bild zu erzielen. Der Trick besteht darin, eine absolute Ebene mit RGB-Farbe über einem Bild zu verwenden. Es funktioniert perfekt für meine allgemeinen Fälle. Probieren!
“Aber das Bild ist nicht wie erwartet “getönt”. und was erwartest du?
– Paolo Forgia
12. Mai 2017 um 13:27 Uhr