Konvertieren Sie ein Bild in HTML / CSS in Graustufen

619

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?

Ken
quelle
14
"Es muss nicht IE-kompatibel sein (und ich kann mir vorstellen, dass es nicht sein wird)" ?? IE bietet seit 1997 eine Reihe von DX-Filtern an (IE4), die diese Aufgabe mit reinem CSS und vielem mehr erledigen. Jetzt haben sie DX-Filter in IE10 entfernt und folgen streng den Standard-SVG-basierten Filtern. Vielleicht möchten Sie sich diese und diese Demo ansehen .
Vulkanischer Rabe
8
@vulcanraven Es ist nicht wirklich "nur CSS" - wenn Sie die aktive Skripterstellung im IE deaktivieren, funktionieren die Filter nicht mehr.
Robertc
3
@ Robertc, das ist ungefähr richtig. Wenn Sie dagegen Javascript in einem beliebigen Browser deaktivieren, funktioniert fast jede RIA einschließlich Stackoverflow nicht mehr (es sei denn, der Webentwickler hat den Fallback nur für HTML-Versionen implementiert).
Vulkanischer Rabe
2
Verwenden Sie einfach das CSS stackoverflow.com/questions/286275/gray-out-image-with-css/… Erhalten Sie meine Antwort in dieser Frage
Sakata Gintoki

Antworten:

728

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 .

Salman Abbas
quelle
1
@CamiloMartin CSS-Filter werden nur von Chrome 18+ unterstützt
Salman von Abbas
2
Update: Die neueste stabile Version von Google Chrome (19) unterstützt jetzt CSS-Filter. Yay! =)
Salman von Abbas
6
Gibt es eine Lösung für Opera?
Rustam
23
Was ist die Lösung für IE10?
Tom Auger
2
Für die Nachwelt: @TomAuger, diese Fragen und Antworten enthalten spezifische Anweisungen für IE10.
Barney
127

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 .

Robertc
quelle
6
Im Webkit tun Sie dies: -webkit-filter: grayscale(100%);dann Folgendes : -webkit-filter: grayscale(0);um es zu entfernen.
SeanJA
@ SeanJA Vielen Dank für das Update, WebKit begann im Dezember
Materials
Ich sehe es in Chrome Beta sowohl auf meinem Linux-Laptop als auch auf meinem Win7-Computer. Es schien in Chrome Stable unter Linux nicht zu funktionieren (aber andererseits ist es möglich, dass sich die Linux-Version hinter Windows befindet).
SeanJA
1
Diese Methode funktioniert in Chrome einwandfrei, hat jedoch in Safari keine Auswirkungen. In FF werden meine Bilder bis zum Schweben unsichtbar.
Colmtuite
85

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.

mquandalle
quelle
3
Nur ein Hinweis, um Kopfschmerzen zu vermeiden: YUI Compressor entfernt Leerzeichen in Daten-URLs. Sie können also einen anderen Minifier verwenden, wenn Sie diese Lösung verwenden möchten.
Malte
6
@Malte Oder ersetzen Sie einfach Leerzeichen durch eine "% 20" -String?
Mquandalle
@mquandalle IE10 unterstützt leider keinen Filter: grey blogs.msdn.com/b/ie/archive/2011/12/07/…
Jedi.za
1
Auf Firefox ist mein Grau sehr hell. Gibt es eine Möglichkeit, den Kontrast zu erhöhen oder leicht abzudunkeln? Andere Browser sehen toll aus.
square_eyes
27

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%);
}
Karl Horky
quelle
14

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/

chrismacp
quelle
11

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" />
RobertT
quelle
2
Scheint eine bessere, einfachere Lösung zu sein - wäre gut, wenn SalmanPK und mquandalle ihre Lösungen darauf aktualisieren würden. Anscheinend ist die Matrix, die sie verwenden, kaputt. <br> <br> Hier ist die eingebettete Datenversion: filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale");
psdie
11

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.

NK Chaudhary
quelle
7

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.

Roman Nurik
quelle
7

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

Annie
quelle
7

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

Brillout
quelle
Hallo Brillout. Mir ist aufgefallen, dass Ihre Graustufen bei einer Safari tatsächlich versagen. Irgendwelche Folgemaßnahmen? Danke
Schwan
1
SVG ist kein HTML. Es ist eine ganz andere Spezifikation.
Camilo Martin
@CamiloMartin Hier ist SVG in der HTML-Spezifikation .
Robertc
1
@robertc Bei diesem Link geht es darum, eine SVG in ein HTML einzufügen, aber hier ist die SVG-Spezifikation und hier ist die HTML-Spezifikation . Die Tatsache, dass beide einander (oder XML) ähnlich sind, bedeutet nicht, dass sie dasselbe sind ...
Camilo Martin
1
Aber es verweist auf die SVG-Spezifikation in der Referenz ... Es definiert SVG nicht, sagt nur, dass Browser es analysieren sollten. In dieser Hinsicht ist es wie Javascript oder CSS.
Camilo Martin
6

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

vals
quelle
1
@ Andy Ich begann meine Antwort in modernen Browsern zu
vals
Wie können Sie das anwenden, wenn ein imgTag für das Bild nicht verwendet wirdbackground: url()
Mohammad Elbanna
1
@MohammadElbanna Sie müssen Mix-Blend-Modus anstelle von Hintergrund-Blend-Modus verwenden
Vals
5
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
Amee
quelle
4

Vielleicht hilft dir dieser Weg

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

w3schools.org

YuZA
quelle
3

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.

Alex
quelle
Ich habe nicht einmal eine Windows-Box, also danke, aber das nützt mir wenig.
Ken
In diesem Fall können Sie es mit einer virtuellen Maschine mit IE betrachten, die Methode von ax implementieren oder Canvas verwenden. Beachten Sie, dass Graustufen bei großen Bildern mit Canvas für die Javascript-Engine sehr anstrengend sein können.
Alex
7
filter: grayist seit Version 4 im Internet Explorer vorhanden . Sie haben viel Mist für ihr Produkt genommen - zu Recht! - aber sie waren ihrer Zeit mit diesem Zeug wirklich voraus
Pekka
2

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.

Shalom Craimer
quelle
2

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

hjindal
quelle
2

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);
    }
}
James van Dyke
quelle
2

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%);
}
maťo
quelle
2

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:

Referenz zu MDN

Bigood
quelle
1

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:

Kajiyama
quelle
Ich bin damit einverstanden, dass 0,3333 falsch ist. 0.2126 0.7152 0.0722 0 0scheint das Äquivalent von<fecolormatrix type="saturate" values="0">
Neil
Der Link zu "Und hier finden Sie einige C # - und VB-Codes" finden Sie im Internetarchiv hier: web.archive.org/web/20110220101001/http://www.bobpowell.net/…
thisgeek
Die Verknüpfung zu "Die Luminanz- und Farbdifferenzsignale" ist ebenfalls unterbrochen. Ich konnte keinen Ersatz finden.
Thisgeek
0

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!

richardtallent
quelle
0

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)

G-Cyrillus
quelle
0

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

Nicholas TJ
quelle
0

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"
dval
quelle
-1

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

?>
Trufa
quelle
4
@ Tom, basierend auf den Stimmen und Favoriten der ursprünglichen Frage, ist das OP nicht die einzige Person, die sich gefragt hat, ob dies möglich ist. Sicher, diese Antwort könnte die Regeln verbiegen, aber ich sehe keinen Sinn darin, eine Antwort herunterzustimmen, die für viele Menschen nützlich sein könnte.
Michael Martin-Smucker
1
@ Tom, ich denke, obwohl es keine genaue Antwort auf die Frage sein könnte, könnte es nützlich sein, da es das Problem der Graustufen tatsächlich ohne den "Ärger" von Javascript "löst", vielleicht hat er nicht einmal über PHP nachgedacht oder wusste davon GD, kein Schaden beabsichtigt. @ mlms13 das war genau der Punkt, danke :)
Trufa
Das ist mein schlechter "Gedanke" darüber, dass andere Benutzer von diesem Beitrag profitieren können, der mir aus dem Kopf gegangen ist. Entschuldigung @Trufa.
Ruck
3
Das hat mir geholfen, mich nach ein paar anderen Sackgassen auf den richtigen Weg zu bringen. Ich fand, dass "imagefilter ($ source, IMG_FILTER_GRAYSCALE);" gab ein viel besseres Ergebnis. (Nur PHP 5)
Chrismacp
5
Abgestimmt, da es praktisch nicht zum Thema gehört. Das Graustufen eines Bildes auf der Serverseite unterscheidet sich grundlegend von CSS / HTML.
Simon Steinberger