Konvertieren Sie ein Bild in HTML / CSS in Graustufen

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 SVGund Canvas machen kann, aber das scheint momentan eine Menge Arbeit zu sein.

Gibt es einen wirklich faulen Weg, dies zu tun?

Die Unterstützung für CSS-Filter ist in Webkit gelandet. Wir haben jetzt 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="http://lorempixel.com/400/200/">

Was ist mit Internet Explorer 10?

Sie können eine Polyfüllung wie Grau verwenden .

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:

<?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 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 filterEigenschaft:

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

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- filterEigenschaft in SalmanPKs Antwort in Übereinstimmung mit dem hier beschriebenen SVG-Ansatz beschreibt. Wenn Sie diesen Ansatz verwenden, erhalten Sie Folgendes:

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 finden Sie hier .

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:

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 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.

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.

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%);
}

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/

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:

<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: grey:" im standardkonformen Modus nicht mehr unterstützt und daher den Kompatibilitätsmodusschalter in den Headern benötigt, um zu funktionieren:

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

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

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

Die Eigenschaft wird immer noch nicht vollständig unterstützt und benötigt die -webkit-filterEigenschaft weiterhin für die Unterstützung in allen Browsern.

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.

Wenn Sie in anderen Antworten nach der ignorierten IE10 + -Unterstützung fragen, lesen Sie diese CSS-Datei:

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

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

svg image:hover {
    opacity: 0;
}

Auf dieses Markup angewendet:

<!DOCTYPE HTML>
<html>
<head>

    <title>Grayscaling in Internet Explorer 10+</title>

</head>
<body>

    <p>IE10 with inline SVG</p>
    <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
      <defs>
         <filter id="filtersPicture">
           <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
           <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
        </filter>
      </defs>
      <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
    </svg>

</body>
</html>

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

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 :-)

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)

.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 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.)

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

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

Vielleicht hilft dir dieser Weg

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

w3schools.org

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: Grayunter http://www.ssi-developer.net/css/visual-filters.shtml

Die 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.

Wenn 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.

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 ...

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.

.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 benutze es:

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

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:

img.grayscale {
    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"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

img.grayscale.disabled {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: none;
    -webkit-filter: grayscale(0%);
}

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 :

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

Wo $vist zwischen 0und 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 zu MDN

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:

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

Sie sollten die Konvertierungsmatrix wie folgt verwenden:

0.299 0.299 0.299 0
0.587 0.587 0.587 0
0.112 0.112 0.112 0
0     0     0     1

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:

• Die Luminanz- und Farbdifferenzsignale
• Margus 'Antwort auf die Frage: "Graustufenwert im Farbwert" @stackoverflow Teil: Bearbeiten 2: @Hans Passant
• Charles A. Bouman - Purdue Universität - Analoges Fernsehen Seite 20 & 21
• Und hier finden Sie einige C # - und VB-Codes

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!

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)

Sie können eine der Funktionen von jFunc verwenden - verwenden Sie die Funktion "jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx

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:

$("#myImageID").tancolor();

Es gibt eine interaktive Demo . Sie können damit herumspielen.

Schauen Sie sich die Dokumentation zur Verwendung an, es ist ziemlich einfach. docs

Verwenden Sie für Graustufen in Prozent in Firefox stattdessen den Sättigungsfilter : (suchen Sie nach 'gesättigt')

filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='saturate'><feColorMatrix in='SourceGraphic' type='saturate' values='0.2' /></filter></svg>#saturate"

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 ...

<?php
$img = @imagecreatefromgif("php.gif");

if ($img) $img_height = imagesy($img);
if ($img) $img_width = imagesx($img);

// Create image instances
$dest = imagecreatefromgif('php.gif');
$src = imagecreatefromgif('php.gif');

// Copy and merge - Gray = 20%
imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20);

// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);

imagedestroy($dest);
imagedestroy($src);

?>