Bild Grau einfärben

[xHBBo]

Guten Abend,

wollte ein Bild Grau einfärben

  
.test {  
	opacity:0.2;  
}  

damit erreiche ich aber nur dass ich weniger Deckkraft erhalte. Wie könnte ich es machen dass ich das Bild wirklich in Grau habe? Oder muss ich das Bild in zwei Varianten abspeichern?

[Steel]

Hi,
Ich weiss nicht, obs mittlerweile entsprechende Möglichkeiten zur Bildbearbeitung in CSS gibt.

Du kannst die Farbinformationen normalerweise nicht entfernen. Grautöne sind ja eigentlich nur eine Abbildung der Hell und Dunkelwerte eines Bildes.

Du müsstest also 2 Bilder benutzen.

[xHBBo]

Hallo,

Du kannst die Farbinformationen normalerweise nicht entfernen. Grautöne sind ja eigentlich nur eine Abbildung der Hell und Dunkelwerte eines Bildes.

Du müsstest also 2 Bilder benutzen.

Danke für deine schnelle Antwort. Wollte damit erreichen wenn ein User offline geht dass dann das Bild Grau angezeigt wird. Zwei Bilder möchte ich eigentlich ungern speichern. Dann stelle ich es einfach etwas "blasser" da.

[1UnitedPower]

Meine Herren!

Ich weiss nicht, obs mittlerweile entsprechende Möglichkeiten zur Bildbearbeitung in CSS gibt.

Die gibt es, aber sie sind leider noch nicht robust zu gebrauchen.

[xHBBo]

Hallo,

Die gibt es, aber sie sind leider noch nicht robust zu gebrauchen.

so schlecht sieht das aber nicht aus. OK der IE macht zicken aber das könnte ich verkraften. Soll ja nur ein netter Effekt sein.

[Gunnar Bittersmann]

@@xHBBo:

nuqneH

so schlecht sieht das aber nicht aus. OK der IE macht zicken aber das könnte ich verkraften.

Alte IEs können das mit ihrem proprietärem Filter Gray().

Qapla'

[xHBBo]

Guten Morgen,

Alte IEs können das mit ihrem proprietärem Filter Gray().

Hab es jetzt so umgesetzt

  
.test {  
	-webkit-filter: grayscale(100%);  
	filter: grayscale(100%);  
}  

Im Google Chrome sieht es sehr schön aus, allerdings macht selbst der Firefox nicht mit. Wenn ich es richtig verstanden habe, sollte es laut http://caniuse.com/#feat=css-filters auch im Firefox gehen, was es aber bei mir nicht tut. Leider verstehe ich auch nicht wie ich dein Filter für den IE anwenden muss. Könntest du mir hier vielleicht weiterhelfen?

[Gunnar Bittersmann]

@@xHBBo:

nuqneH

Wenn ich es richtig verstanden habe, sollte es laut http://caniuse.com/#feat=css-filters auch im Firefox gehen, was es aber bei mir nicht tut.

Du hast „Partial support in Firefox 31 only with url() version“ überlesen?

Leider verstehe ich auch nicht wie ich dein Filter für den IE anwenden muss.

Unter Syntax in der Zeile HTML[sic!]: „<ELEMENT STYLE=
"filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)" ... >“

Der Inhalt des style-Attributs ist eine CSS-Deklaration, die natürlich auch im Stylesheet stehen kann. Lies: sollte.

Das einfache http://de.selfhtml.org/css/eigenschaften/filter.htm#gray@title=filter:Gray() sollte es aber auch tun.

Die Suche nach „filter ie10“ führt zu: IEBlog: SVG Filter Effects in IE10 und Stack Overflow: internet explorer 10 - howto apply grayscale filter?, von dort geht’s zu Karl Horky: Cross-Browser Image Grayscale with CSS.

Qapla'

[M.]

Mahlzeit,

damit erreiche ich aber nur dass ich weniger Deckkraft erhalte. Wie könnte ich es machen dass ich das Bild wirklich in Grau habe? Oder muss ich das Bild in zwei Varianten abspeichern?

Schonmal probiert, dass du ein graues Rechteck über das Bild legst und dann mal die Transparenz veränderst? Evtl. ergibt das den gewünschten Effekt.

[Steel]

Hi!

Schonmal probiert, dass du ein graues Rechteck über das Bild legst und dann mal die Transparenz veränderst? Evtl. ergibt das den gewünschten Effekt.

Das würde das Bild nicht in Graustufen umwandeln sondern eher einen Helligkeits-/Kontrastfilter abgeben. Dürfte wahrscheinlich nicht an den Efekt kommen der gewünscht ist. Ich muss aber zugeben, daß das auch mein allererster Gedanke war.

[Gunnar Bittersmann]

@@xHBBo:

nuqneH

wollte ein Bild Grau einfärben

Für diesen Anwendungsfall mag es eher irrelevant sein, aber allgemein sollte man aufpassen, wie ein Grau-Filter implementiert ist (in Photoshop gibt es eine ganze Reihe davon zur Auswahl). Es sollte ein gewichtetes Mittel aus R, G und B sein.

Qapla'