Gibt es eine einfache Möglichkeit, eine Farbbitmap in Graustufen mit nur anzuzeigen HTML/CSS
?
Es muss nicht IE-kompatibel sein (und ich kann mir vorstellen, dass es nicht kompatibel sein wird) - wenn es in FF3 und / oder Sf3 funktioniert, ist das gut genug für mich.
Ich weiß, dass ich es mit beiden SVG
und Canvas machen kann, aber das scheint momentan eine Menge Arbeit zu sein.
Gibt es einen wirklich faulen Weg, dies zu tun?
Antworten:
Die Unterstützung für CSS-Filter ist in Webkit gelandet. Wir haben jetzt eine browserübergreifende Lösung.
Was ist mit Internet Explorer 10?
Sie können eine Polyfüllung wie Grau verwenden .
quelle
In Anlehnung an die Antwort von brillout.com und auch an die Antwort von Roman Nurik und die Lockerung der Anforderung "kein SVG" können Sie Bilder in Firefox mit nur einer einzigen SVG-Datei und etwas CSS entsättigen.
Ihre SVG-Datei sieht folgendermaßen aus:
Speichern Sie das als resources.svg, es kann von nun an für jedes Bild wiederverwendet werden, das Sie in Graustufen ändern möchten.
In Ihrem CSS verweisen Sie auf den Filter mithilfe der Firefox-spezifischen
filter
Eigenschaft:Fügen Sie auch die MS-eigenen hinzu, wenn Sie Lust dazu haben, und wenden Sie diese Klasse auf jedes Bild an, das Sie in Graustufen konvertieren möchten (funktioniert in Firefox> 3.5, IE8) .
edit : Hier ist ein netter Blog-Beitrag, der die Verwendung der neuen CSS3-
filter
Eigenschaft in SalmanPKs Antwort in Übereinstimmung mit dem hier beschriebenen SVG-Ansatz beschreibt. Wenn Sie diesen Ansatz verwenden, erhalten Sie Folgendes:Weitere Informationen zur Browserunterstützung finden Sie hier .
quelle
-webkit-filter: grayscale(100%);
dann Folgendes :-webkit-filter: grayscale(0);
um es zu entfernen.Für Firefox müssen Sie keine filter.svg-Datei erstellen. Sie können das Daten-URI-Schema verwenden .
Wenn Sie den CSS-Code der ersten Antwort verwenden, erhalten Sie:
Achten Sie darauf, die Zeichenfolge "utf-8" durch Ihre Dateicodierung zu ersetzen.
Diese Methode sollte schneller als die andere sein, da der Browser keine zweite HTTP-Anforderung ausführen muss.
quelle
Update: Ich habe daraus ein vollständiges GitHub-Repo gemacht, einschließlich JavaScript-Polyfill für IE10 und IE11: https://github.com/karlhorky/gray
Ich habe ursprünglich die Antwort von SalmanPK verwendet , dann aber die folgende Variante erstellt, um die zusätzliche HTTP-Anforderung zu eliminieren, die für die SVG-Datei erforderlich ist. Das Inline-SVG funktioniert in Firefox-Versionen 10 und höher, und Versionen unter 10 machen nicht einmal mehr 1% des globalen Browsermarktes aus.
Seitdem habe ich die Lösung in diesem Blog-Beitrag auf dem neuesten Stand gehalten und Unterstützung für das Zurückblenden in Farbe, IE 10/11-Unterstützung mit SVG und teilweise Graustufen in der Demo hinzugefügt.
quelle
Wenn Sie JavaScript verwenden können, ist dieses Skript möglicherweise genau das, wonach Sie suchen. Es funktioniert browserübergreifend und funktioniert bisher gut für mich. Sie können es nicht mit Bildern verwenden, die aus einer anderen Domain geladen wurden.
http://james.padolsey.com/demos/grayscale/
quelle
Habe heute das gleiche Problem. Ich habe ursprünglich die SalmanPK-Lösung verwendet, aber festgestellt, dass der Effekt zwischen FF und anderen Browsern unterschiedlich ist. Dies liegt daran, dass die Konvertierungsmatrix nur mit Helligkeit und nicht mit Helligkeit wie Filter in Chrome / IE funktioniert. Zu meiner Überraschung habe ich herausgefunden, dass eine alternative und einfachere Lösung in SVG auch in FF4 + funktioniert und bessere Ergebnisse liefert:
Mit CSS:
Eine weitere Einschränkung ist, dass IE10 "filter: grey:" im standardkonformen Modus nicht mehr unterstützt und daher den Kompatibilitätsmodusschalter in den Headern benötigt, um zu funktionieren:
quelle
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale");
Der einfachste Weg, Graustufen ausschließlich mit CSS zu erreichen, ist über die
filter
Eigenschaft.Die Eigenschaft wird immer noch nicht vollständig unterstützt und benötigt die
-webkit-filter
Eigenschaft weiterhin für die Unterstützung in allen Browsern.quelle
Sieht (noch) nicht so aus, als wäre es möglich, selbst mit CSS3 oder proprietären
-webkit-
oder-moz-
CSS-Eigenschaften.Ich habe jedoch diesen Beitrag vom letzten Juni gefunden , in dem SVG-Filter für HTML verwendet wurden. In keinem aktuellen Browser verfügbar (die Demo deutete auf einen benutzerdefinierten WebKit-Build hin), aber als Proof of Concept sehr beeindruckend.
quelle
Wenn Sie in anderen Antworten nach der ignorierten IE10 + -Unterstützung fragen, lesen Sie diese CSS-Datei:
Auf dieses Markup angewendet:
Weitere Demos finden Sie im CSS3- Grafikbereich von IE testdrive und in diesem alten IE-Blog unter http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx
quelle
Verwenden Sie im Internet Explorer die Filtereigenschaft.
In Webkit und Firefox gibt es derzeit keine Möglichkeit, ein Bild ausschließlich mit CSS zu desatuarte. Daher müssen Sie für eine clientseitige Lösung entweder Canvas oder SVG verwenden.
Aber ich denke, die Verwendung von SVG ist eleganter. In meinem Blogbeitrag finden Sie die SVG-Lösung, die sowohl für Firefox als auch für das Webkit funktioniert: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html
Und genau genommen, da SVG HTML ist, ist die Lösung reines HTML + CSS :-)
quelle
Eine neue Möglichkeit, dies zu tun, ist seit einiger Zeit in modernen Browsern verfügbar.
Im Hintergrund-Mischmodus können Sie einige interessante Effekte erzielen. Einer davon ist die Graustufenkonvertierung
Der Wert Helligkeit auf weißem Hintergrund ermöglicht dies. (schweben Sie, um es in grau zu sehen)
Die Leuchtkraft wird dem Bild entnommen, die Farbe dem Hintergrund. Da es immer weiß ist, gibt es keine Farbe.
Aber es erlaubt viel mehr.
Sie können die Effekteinstellung in 3 Ebenen animieren. Das erste ist das Bild und das zweite ist ein weiß-schwarzer Farbverlauf. Wenn Sie hier einen Multiplikations-Mischmodus anwenden, erhalten Sie wie zuvor ein weißes Ergebnis für den weißen Teil, aber das Originalbild für den schwarzen Teil (Multiplizieren mit Weiß ergibt Weiß, Multiplizieren mit Schwarz hat keine Auswirkung.)
Auf dem weißen Teil des Verlaufs erhalten Sie den gleichen Effekt wie zuvor. Auf dem schwarzen Teil des Verlaufs mischen Sie das Bild über sich selbst, und das Ergebnis ist das unveränderte Bild.
Jetzt müssen Sie nur noch den Farbverlauf verschieben, um diesen Effekt dynamisch zu gestalten: (Bewegen Sie den Mauszeiger, um ihn in Farbe anzuzeigen.)
Referenz
Kompatibilitätsmatrix
quelle
img
Tag für das Bild nicht verwendet wirdbackground: url()
quelle
Vielleicht hilft dir dieser Weg
w3schools.org
quelle
Es ist in der Tat einfacher, dies mit dem Internet Explorer zu tun, wenn ich mich daran erinnere, eine proprietäre CSS-Eigenschaft korrekt verwendet zu haben. Versuchen Sie dies
FILTER: Gray
unter http://www.ssi-developer.net/css/visual-filters.shtmlDie Methode von Ax macht das Bild einfach transparent und hat einen schwarzen Hintergrund. Ich bin sicher, Sie könnten argumentieren, dass dies Graustufen sind.
Obwohl Sie Javascript nicht verwenden wollten, müssen Sie es meiner Meinung nach verwenden. Sie können dazu auch eine serverseitige Sprache verwenden.
quelle
filter: gray
ist seit Version 4 im Internet Explorer vorhanden . Sie haben viel Mist für ihr Produkt genommen - zu Recht! - aber sie waren ihrer Zeit mit diesem Zeug wirklich vorausWenn Sie bereit sind, Javascript zu verwenden, können Sie das Bild mithilfe einer Zeichenfläche in Graustufen konvertieren. Da Firefox und Safari unterstützt werden
<canvas>
, sollte es funktionieren.Also habe ich "Canvas Greyscale" gegoogelt und das erste Ergebnis war http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html, was zu funktionieren scheint.
quelle
Die Unterstützung für native CSS-Filter im Webkit wurde ab der aktuellen Version 19.0.1084.46 hinzugefügt
also -webkit-filter: Graustufen (1) funktionieren und das ist einfacher als der SVG-Ansatz für Webkit ...
quelle
Hier ist ein Mixin für WENIGER, mit dem Sie eine beliebige Deckkraft auswählen können. Füllen Sie die Variablen selbst für einfaches CSS mit unterschiedlichen Prozentsätzen aus.
Ein guter Hinweis: Hier wird der gesättigte Typ für die Matrix verwendet, sodass Sie nichts Besonderes tun müssen, um den Prozentsatz zu ändern.
Dann benutze es:
quelle
Sie müssen nicht so viele Präfixe für die vollständige Verwendung verwenden, denn wenn Sie das Präfix für das alte Firefox auswählen, müssen Sie das Präfix für das neue Firefox nicht verwenden.
Verwenden Sie für die vollständige Verwendung diesen Code:
quelle
Als Ergänzung zu den Antworten anderer ist es möglich, ein Bild auf halbem Weg auf FF ohne die Kopfschmerzen der SVG- Matrix zu entsättigen :
Wo
$v
ist zwischen0
und1
. Es ist gleichbedeutend mitfilter:grayscale(50%);
.Live-Beispiel:
Code-Snippet anzeigen
Referenz zu MDN
quelle
Basierend auf der Antwort von robertc :
So erhalten Sie eine ordnungsgemäße Konvertierung von einem Farbbild in ein Graustufenbild, anstatt eine Matrix wie die folgende zu verwenden:
Sie sollten die Konvertierungsmatrix wie folgt verwenden:
Dies sollte für alle Bildtypen funktionieren, die auf dem RGBA-Modell (Rot-Grün-Blau-Alpha) basieren.
Für weitere Informationen, warum Sie Matrix verwenden sollten, habe ich eher gepostet, dass der Robertc die folgenden Links überprüft:
quelle
0.2126 0.7152 0.0722 0 0
scheint das Äquivalent von<fecolormatrix type="saturate" values="0">
Eine schreckliche, aber praktikable Lösung: Rendern Sie das Bild mit einem Flash-Objekt, das Ihnen dann alle in Flash möglichen Transformationen bietet.
Wenn Ihre Benutzer bleeding-edge - Browser verwenden und wenn Firefox 3.5 und Safari 4 unterstützt es (ich weiß nicht , dass entweder tun / werden), können Sie das CSS anpassen Farbprofil Attribut des Bildes, um es zu einem Graustufen - ICC - Einstellung Profil-URL. Aber das ist eine Menge Wenn!
quelle
sein Eine Alternative für ältere Browser zu verwenden Maske von Pseudo-Elemente oder Inline - Tags erzeugt werden könnte.
Absolute Positionierung über einem Bild (oder einem Textbereich, der weder ein Klicken noch eine Auswahl erfordert) kann die Auswirkungen der Farbskala über rgba () oder translucide png genau nachahmen .
Es wird keine einzige Farbskala angezeigt, sondern es werden Farben außerhalb des Bereichs schattiert.
Test auf Code-Stift mit 10 verschiedenen Farben über Pseudo-Element, zuletzt ist grau. http://codepen.io/gcyrillus/pen/nqpDd (neu laden, um zu einem anderen Bild zu wechseln)
quelle
Sie können eine der Funktionen von jFunc verwenden - verwenden Sie die Funktion "jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx
quelle
Probieren Sie dieses JQuery-Plugin aus. Dies ist zwar keine reine HTML- und CSS-Lösung, aber es ist ein fauler Weg, um das zu erreichen, was Sie wollen. Sie können Ihre Graustufen an Ihre Verwendung anpassen. Verwenden Sie es wie folgt:
Es gibt eine interaktive Demo . Sie können damit herumspielen.
Schauen Sie sich die Dokumentation zur Verwendung an, es ist ziemlich einfach. docs
quelle
Verwenden Sie für Graustufen in Prozent in Firefox stattdessen den Sättigungsfilter : (suchen Sie nach 'gesättigt')
quelle
Wenn Sie oder jemand anderes, der in Zukunft mit einem ähnlichen Problem konfrontiert ist, für PHP offen ist. (Ich weiß, dass Sie HTML / CSS gesagt haben, aber vielleicht verwenden Sie bereits PHP im Backend.) Hier ist eine PHP-Lösung:
Ich habe es aus der PHP GD-Bibliothek erhalten und eine Variable hinzugefügt, um den Prozess zu automatisieren ...
quelle