Ein Bild in HTML/CSS in Graustufen umwandeln

Question

Gibt es eine einfache Möglichkeit, eine farbige Bitmap in Graustufen darzustellen, indem man nur HTML/CSS ?

Es muss nicht IE-kompatibel sein (und ich nehme an, dass es das auch nicht sein wird) - wenn es in FF3 und/oder Sf3 funktioniert, ist das gut genug für mich.

Ich weiß, dass ich es mit beidem kann SVG und Canvas, aber das scheint im Moment eine Menge Arbeit zu sein.

Gibt es eine wirklich faule Methode, dies zu tun?

Answer 1

Wenn Sie in der Lage sind, JavaScript zu verwenden, dann könnte dieses Skript genau das Richtige für Sie sein. Es funktioniert browserübergreifend und funktioniert bei mir bisher einwandfrei. Sie können es nicht mit Bildern verwenden, die von einer anderen Domain geladen wurden.

http://james.padolsey.com/demos/grayscale/

Answer 2

Ich habe gerade heute das gleiche Problem. Ich habe zunächst verwendet SalmanPK-Lösung fand aber heraus, dass der Effekt zwischen FF und anderen Browsern unterschiedlich ist. Das liegt daran, dass die Konvertierungsmatrix nur mit der Helligkeit arbeitet und nicht mit der Leuchtkraft wie die Filter in Chrome/IE. Zu meiner Überraschung habe ich herausgefunden, dass alternative und einfachere Lösung in SVG auch in FF4+ funktioniert und bessere Ergebnisse liefert:

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>

Mit css:

img {
    filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

Eine weitere Einschränkung ist, dass IE10 "filter: gray:" im standardkonformen Modus nicht mehr unterstützt, daher muss der Kompatibilitätsmodus in den Kopfzeilen umgeschaltet werden, um zu funktionieren:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Answer 3

Seit einiger Zeit gibt es in modernen Browsern eine neue Möglichkeit, dies zu tun.

hintergrund-überblend-modus können Sie einige interessante Effekte erzielen, darunter die Graustufen-Konvertierung

Der Wert Leuchtkraft auf weißem Hintergrund erlaubt es. (schweben, um es in grau zu sehen)

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}

<div class="test"></div>

Die Helligkeit wird aus dem Bild, die Farbe aus dem Hintergrund entnommen. Da dieser immer weiß ist, gibt es keine Farbe.

Aber sie erlaubt noch viel mehr.

Sie können die Effekteinstellung auf 3 Ebenen animieren. Die erste Ebene ist das Bild und die zweite Ebene ist ein weiß-schwarzer Farbverlauf. Wenn Sie den Mischmodus "Multiplizieren" darauf anwenden, erhalten Sie auf dem weißen Teil ein weißes Ergebnis wie zuvor, auf dem schwarzen Teil jedoch das Originalbild (Multiplizieren mit Weiß ergibt Weiß, Multiplizieren mit Schwarz hat keine Wirkung).

Auf dem weißen Teil des Farbverlaufs erhalten Sie denselben Effekt wie zuvor. Auf dem schwarzen Teil des Verlaufs überlagern Sie das Bild mit 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 zu sehen)

div {
    width: 600px;
    height: 400px;
}

.test {
    background: url("http://placekitten.com/1000/750"), 
linear-gradient(0deg, white 33%, black 66%), url("http://placekitten.com/1000/750"); 
    background-position: 0px 0px, 0px 0%, 0px 0px;
    background-size: cover, 100% 300%, cover;
    background-blend-mode: luminosity, multiply;
    transition: all 2s;
}

.test:hover {
    background-position: 0px 0px, 0px 66%, 0px 0px;
}

<div class="test"></div>

Referenz

Kompatibilitätsmatrix

Answer 4

Sieht nicht so aus, als ob das (noch) möglich wäre, auch nicht mit CSS3 oder proprietären -webkit- o -moz- CSS-Eigenschaften.

Ich habe jedoch Folgendes gefunden dieser Beitrag vom letzten Juni die SVG-Filter auf HTML verwendet. Nicht in jedem aktuellen Browser verfügbar (die Demo deutete auf eine benutzerdefinierte WebKit-Erstellung hin), aber sehr beeindruckend als Proof of Concept.

Answer 5

Im Internet Explorer verwenden Sie die Filtereigenschaft.

In Webkit und Firefox gibt es derzeit keine Möglichkeit, ein Bild ausschließlich mit CSS zu desatuieren. Sie müssen also entweder Canvas oder SVG für eine clientseitige Lösung verwenden.

Ich denke aber, dass die Verwendung von SVG eleganter ist. In meinem Blogbeitrag finden Sie die SVG-Lösung, die sowohl für Firefox als auch für Webkit funktioniert: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

Und da SVG streng genommen HTML ist, ist die Lösung rein html+css :-)