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

Die Unterstützung für CSS-Filter ist in Webkit gelandet. Wir haben jetzt also eine browserübergreifende Lösung.

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png">

---

Was ist mit Internet Explorer 10?

Sie können ein Polyfill verwenden wie grau .

Answer 2

Anknüpfend an brillout.com's Antwort und auch Roman Nuriks Antwort und die Anforderung "kein SVG" etwas zu lockern, können Sie Bilder in Firefox mit nur einer einzigen SVG-Datei und etwas CSS entsättigen.

Ihre SVG-Datei wird wie folgt aussehen:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0      0      0      1 0"/>
    </filter>
</svg>

Speichern Sie die Datei unter dem Namen resources.svg. Sie kann von nun an für jedes Bild, das Sie in Graustufen umwandeln möchten, wiederverwendet werden.

In Ihrem CSS referenzieren Sie den Filter mit dem Firefox-spezifischen filter Eigentum:

.target {
    filter: url(resources.svg#desaturate);
}

Fügen Sie auch die MS-eigenen hinzu, wenn Sie Lust dazu haben, Wenden Sie diese Klasse auf jedes Bild an, das Sie in Graustufen umwandeln möchten (funktioniert in Firefox >3.5, IE8) .

editar : Hier ist ein schöner Blogbeitrag die die Verwendung des neuen CSS3 filter Eigenschaft in der Antwort von SalmanPK in Verbindung mit dem hier beschriebenen SVG-Ansatz. Mit diesem Ansatz würden Sie mit etwas wie enden:

img.desaturate{
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}

Weitere Informationen zur Browserunterstützung hier .

Answer 3

Für Firefox müssen Sie keine filter.svg-Datei erstellen, Sie können die Datei Daten URI-Schema .

Die Aufnahme des css-Codes der ersten Antwort ergibt:

filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */

Achten Sie darauf, die Zeichenkette "utf-8" durch Ihre Dateikodierung zu ersetzen.

Diese Methode sollte schneller sein als die andere, da der Browser keine zweite HTTP-Anfrage stellen muss.

Answer 4

Aktualisierung: Ich habe daraus ein komplettes GitHub Repo gemacht, einschließlich JavaScript Polyfill für IE10 und IE11: https://github.com/karlhorky/gray

Ursprünglich habe ich SalmanPK's Antwort und erstellte dann die folgende Variante, um die zusätzliche HTTP-Anfrage für die SVG-Datei zu eliminieren. Das Inline-SVG funktioniert in den Firefox-Versionen 10 und höher. Versionen unter 10 machen nicht einmal mehr 1 % des weltweiten Browsermarktes aus.

Seitdem habe ich die Lösung auf dem Laufenden gehalten dieser Blogbeitrag Unterstützung für das Zurückblenden zu Farbe, IE 10/11-Unterstützung mit SVG und teilweise Graustufen in der Demo.

img.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");

  /* IE 6-9 */
  filter: gray;

  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
}

img.grayscale.disabled {
  filter: none;
  -webkit-filter: grayscale(0%);
}

Answer 5

Der einfachste Weg, Graustufen ausschließlich mit CSS zu erreichen, ist über die filter Eigentum.

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Die Eigenschaft wird immer noch nicht vollständig unterstützt und erfordert immer noch die -webkit-filter Eigenschaft für die Unterstützung in allen Browsern.