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

Als Ergänzung zu den Antworten der anderen, ist es möglich, ein Bild in FF ohne SVG's halbwegs zu entsättigen der Matrix Kopfschmerzen:

<feColorMatrix type="saturate" values="$v" />

Wo $v liegt zwischen 0 y 1 . Es ist gleichbedeutend mit filter:grayscale(50%); .

Live-Beispiel:

.desaturate {
    filter: url("#desaturate");
    -webkit-filter: grayscale(50%);
}
figcaption{
    background: rgba(55, 55, 136, 1);
    padding: 4px 98px 0 18px;
    color: white;
    display: inline-block;
    border-top-left-radius: 8px;
    border-top-right-radius: 100%;
    font-family: "Helvetica";
}

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

<figure>
  <figcaption>Original</figcaption>
  <img src="http://www.placecage.com/c/500/200"/>
  </figure>
<figure>
  <figcaption>Half grayed</figcaption>
  <img class="desaturate" src="http://www.placecage.com/c/500/200"/>
</figure>

Referenz auf MDN

Answer 2

Hier ist ein Mixin für LESS, mit dem Sie eine beliebige Deckkraft wählen können. Füllen Sie die Variablen selbst für einfache CSS bei verschiedenen Prozentsätzen.

Netter Hinweis hier Für die Matrix wird der Typ "Sättigung" verwendet, so dass Sie nichts Besonderes tun müssen, um den Prozentsatz zu ändern.

.saturate(@value:0) {
    @percent: percentage(@value);

    filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='saturate'%20values='@value'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: grayscale(@percent); /* Current draft standard */
    -webkit-filter: grayscale(@percent); /* New WebKit */
    -moz-filter: grayscale(@percent);
    -ms-filter: grayscale(@percent);
    -o-filter: grayscale(@percent);
}

Dann benutzen Sie es:

img.desaturate {
    transition: all 0.2s linear;
    .saturate(0);
    &:hover {
        .saturate(1);
    }
}

Answer 3

Unterstützung für native CSS-Filter in Webkit wurde ab der aktuellen Version 19.0.1084.46 hinzugefügt

so -webkit-filter: grayscale(1) wird funktionieren und das ist einfacher als SVG-Ansatz für webkit...

Answer 4

Wenn Sie bereit sind, Javascript zu verwenden, können Sie eine Leinwand verwenden, um das Bild in Graustufen umzuwandeln. Da Firefox und Safari Folgendes unterstützen <canvas> sollte es funktionieren.

Also googelte ich "canvas grayscale", und das erste Ergebnis war http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html was zu funktionieren scheint.

Answer 5

Sein Eine Alternative für ältere Browser könnte die Verwendung von Masken sein, die durch Pseudo-Elemente oder Inline-Tags erzeugt werden.

Die absolute Positionierung eines Bildes (oder eines Textbereichs, der weder angeklickt noch ausgewählt werden muss) kann die Effekte der Farbskala sehr gut imitieren, über rgba() oder translucide png .

Es gibt nicht nur eine einzige Farbskala, sondern schattiert Farben außerhalb des Bereichs.

Test auf Code-Stift mit 10 verschiedenen Farben über Pseudo-Element, letzte ist grau . http://codepen.io/gcyrillus/pen/nqpDd (neu laden, um zu einem anderen Bild zu wechseln)