css - style - w3schools




Konvertieren eines Bildes in Graustufen in HTML/CSS (18)

Gibt es eine einfache Möglichkeit, ein Farbbitmap in Graustufen mit nur HTML/CSS anzuzeigen?

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

Ich weiß, dass ich es sowohl mit SVG als auch mit Canvas machen kann, aber das scheint momentan eine Menge Arbeit zu sein.

Gibt es einen wirklich faulen Menschen, der das macht?


Als Ergänzung zu den Antworten anderer ist es möglich, ein Bild auf FF halb zu entsättigen, ohne die Kopfschmerzen der SVG- Matrix :

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

Wo $v zwischen 0 und 1 . Es entspricht dem 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


Basierend auf robertcs Antwort :

Um eine korrekte Umwandlung von einem farbigen Bild in ein Graustufenbild zu erhalten, anstatt eine solche Matrix 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 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 Arten von Bildern funktionieren, die auf dem RGBA-Modell (rot-grün-blau-alpha) basieren.

Für weitere Informationen, warum Sie Matrix verwenden sollten, postete ich eher, dass die robertc's folgende Links überprüfen:


Ein neuer Weg, dies zu tun, ist seit einiger Zeit auf modernen Browsern verfügbar.

Hintergrund-Blend-Modus ermöglicht es Ihnen, einige interessante Effekte zu erhalten, und einer davon ist Graustufen-Konvertierung

Die Wertleuchtkraft , auf einem weißen Hintergrund eingestellt, erlaubt es. (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 wird dem Hintergrund entnommen. Da es immer weiß ist, gibt es keine Farbe.

Aber es erlaubt viel mehr.

Sie können die Effekteinstellung für 3 Ebenen animieren. Der erste wird das Bild sein und der zweite wird ein weiß-schwarzer Farbverlauf sein. Wenn Sie einen Multiply-Blend-Modus verwenden, erhalten Sie ein weißes Ergebnis wie zuvor auf dem weißen Teil, aber das Originalbild auf dem schwarzen Teil (multipliziert mit Weiß ergibt Weiß, multipliziert mit Schwarz hat keinen Effekt).

Auf dem weißen Teil des Verlaufs erhalten Sie den gleichen Effekt wie zuvor. Auf dem schwarzen Teil des Farbverlaufs mischen Sie das Bild über sich selbst, und das Ergebnis ist das unveränderte Bild.

Jetzt müssen Sie nur 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>

reference

Kompatibilitätsmatrix


Eine schreckliche, aber praktikable Lösung: Rendern Sie das Bild mit einem Flash-Objekt, das Ihnen alle in Flash möglichen Transformationen bietet.

Wenn Ihre Benutzer hochmoderne Browser verwenden und wenn Firefox 3.5 und Safari 4 es unterstützen (ich weiß nicht, dass das auch geschieht), könnten Sie das CSS- Farbprofilattribut des Bildes anpassen, indem Sie es auf eine Graustufen-ICC setzen Profil-URL. Aber das ist eine Menge, wenn's geht!


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

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


Für Graustufen als Prozentsatz in Firefox verwenden Sie stattdessen den Sättigungsfilter : (nach 'Sättigung' suchen)

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"

Habe gerade das gleiche Problem heute. Ich habe ursprünglich die SalmanPK-Lösung verwendet, aber herausgefunden, dass der Effekt zwischen FF und anderen Browsern unterschiedlich ist. Das liegt daran, dass die Konvertierungsmatrix nur auf Helligkeit, nicht auf Helligkeit, wie Filter in Chrome / IE, wirkt. Zu meiner Überraschung habe ich herausgefunden, dass die 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+ */
}

Ein weiterer Nachteil ist, dass IE10 "filter: grey:" im standardkonformen Modus nicht mehr unterstützt, daher muss der Kompatibilitätsmodus in den Headern funktionieren:

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

Hier ist ein Mix für LESS, mit dem Sie jede Deckkraft auswählen können. Füllen Sie die Variablen für einfache CSS mit unterschiedlichen Prozentsätzen aus.

Ordentlicher Hinweis hier , es verwendet den Sättigungstyp für die Matrix, so dass Sie nichts Besonderes machen 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 für altes Firefox firefox wählen, brauchen Sie kein Präfix für neue Firefox verwenden.

Verwenden Sie diesen Code also zur vollständigen Verwendung:

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

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

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


Versuchen Sie dieses jquery-Plugin. 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 Anforderungen anpassen. Benutze es wie folgt:

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

Es gibt eine interaktive demo . Du kannst damit herumspielen.

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


Vielleicht hilft dir dieser Weg

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

w3schools.org


Wenn Sie JavaScript verwenden können, ist dieses Skript möglicherweise das, wonach Sie suchen. Es funktioniert über den Browser und funktioniert für mich bisher gut. Sie können es nicht mit Bildern verwenden, die aus einer anderen Domäne geladen sind.

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


Wenn Sie oder jemand anderes, der in Zukunft einem ähnlichen Problem gegenübersteht, offen für PHP sind. (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 von der PHP GD-Bibliothek bekommen 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);

?>

Unterstützung für CSS-Filter ist in Webkit gelandet. So haben wir jetzt eine Cross-Browser-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 ein Polyfill wie gray .


Update: Ich machte dies zu einem vollständigen GitHub Repo, einschließlich JavaScript Polyfill für IE10 und IE11: gray

Ich habe ursprünglich die Antwort von SalmanPK verwendet , aber dann 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 Browser-Markts aus.

Seitdem habe ich die Lösung in diesem Blogbeitrag auf dem neuesten Stand gehalten, indem ich Unterstützung für das Zurückblenden auf Farbe, Unterstützung für IE 10/11 mit SVG und partielle Graustufen in der Demo hinzugefügt habe.

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

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






grayscale