Wie dimmt man ein Bild, das Transparenz mit CSS oder JS unberührt lässt?
Der normale Ansatz zum Dimmen eines Bildes, das überall vorgeschlagen wird, besteht darin, sein Opazitätsattribut zu ändern und etwas dunkles darunter anzuzeigen. Mein Bild hat jedoch Transparenz und ist auf weißem Hintergrund. Daher möchte ich den Hintergrund unter transparenten Bildteilen weiß halten und die Pixel, die eine Farbe haben, nur dunkler machen. Ist dies in CSS (vorzugsweise) oder JS möglich?
BEARBEITEN: Beispielbilder Ссылка
Beispielbild:
4 Antworten
Es gibt eine relativ neue CSS-Eigenschaft filter , mit der Sie erreichen könnten, wonach Sie suchen.
Die Option brightness scheint genau das zu sein, wonach Sie suchen.
BEARBEITEN - Zwischenzeitliche Unterstützung für FF über URL hinzugefügt
JSFiddle Demo (mit Helligkeits- und Kontrastoptionen)
CSS
%Vor%Der Support ist nicht-IE, siehe CanIUse.com
FF-Unterstützung (zum Zeitpunkt des Schreibens) erfordert die Definition eines SVG-Filters
Helligkeit @ 50%
%Vor%Kontrast @ 200%
%Vor%Wenn Sie JavaScript anstelle von css verwenden möchten, ist es nicht besonders schwierig, dies mit der HTML-Zeichenfläche zu tun. Sie übergeben der Leinwand einfach ein Bildobjekt und greifen dann den Kontext, der es Ihnen ermöglicht, die einzelnen Farbkanäle zu durchlaufen und zu bearbeiten. Natürlich bricht es komplett ohne JS.
%Vor%Dies ist eine naive Berechnung, um es leicht zu machen, aber wie Sie sehen können, wäre es nicht schwer, es zu etwas Kleinerem zu verändern. Da wir den Alphakanal nicht berühren, bleibt die Transparenz unberührt.
Hier ist eine Geige: Ссылка (Der Browser beschwert sich zumindest in Safari über das Kreuzherkunftsbild, weshalb die vorletzte Zeile da ist.)
Haben Sie daran gedacht, die Deckkraft des Bildes zu ändern, sagen Sie, dass Sie ein div über das Bild mit der gleichen Größe wie das Bild setzen, eine Deckkraft von 0,3 und eine Hintergrundfarbe von schwarz.
Das ist vielleicht nicht das, wonach du suchst, obwohl es Denkanstöße gibt.
Gab
Eine andere Möglichkeit wäre das Verwenden der neuen Eigenschaft CSS mask (derzeit nur von webkit vollständig unterstützt) auf dem div mit der Verdunkelung.
Tags und Links javascript html css opacity