Monatsrückblick Juli / August 2026 ist online!

[metaxa]

Ich versuche erfolglos ein farbiges Bild fallweise in Schwarz/Weiss darzustellen:

im CSS Reiter "allgemein" habe ich folgendes eingetragen:

@sw
.grau_filter {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

Im Widget habe ich unter CSS "grau_filter" eingetragen

Leider ohne Erfolg. Kann mir bitte iwer helfen?
mxa

[OliverIO]

@metaxa

Das css selektiert das Widget was ein div ist, muss aber direkt das img tag treffen.
Probier mal noch mit ergänzten img

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

Das selektiert alle img tags unterhalb des Elements was mit deiner css Klasse versehen ist

Wenn du nicht ausgerechnet Opera Mini nutzt, kannst du die WebKit zeile entfernen
Mittlerweile können Filter nahezu alle Browser

[metaxa]

@OliverIO sagte:

Probier mal noch mit ergänzten img

@sw
.grau_filter img {
    filter: grayscale(100%);
}

Erstens danke für deine rasche Rückmeldung und zweitens, leider nein, keine Veränderung. Tut nix.

[OliverIO]

@metaxa
Dann ist da noch was dazwischen
Mit den webdeveloper Tools kannst Du das untersuchen
Rechte Maustaste auf das Bild und dann inspect oder untersuchen.
Da siehst Du dann auch ob der selector das Element trifft und auch dynamisch anpassen.
Bei chrome gibt da sogar einen kostenlosen ki Assistenten den du fragen kannst.
Einfach das css reinkopierennund fragen warum das Element nicht selektiert wird

[metaxa]

Hmpffff .... habe schon geschaut, komme aber nicht wirklich weiter. Kann die Meldungen nicht richtig deuten. Ich versuche weiter ......

[OliverIO]

@metaxa

funktioniert hier einwandfrei

ohne

danach trage ich bei CSS Class
graufilter
ein

und im css tab

.graufilter img {
    filter: grayscale(100%);
}

widget export

Spoiler

[{"tpl":"tplImage","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"src":"https://thumb.wikimedia.org/wikipedia/commons/thumb/2/25/Buchenwald_Fr%C3%BChling.JPG/500px-Buchenwald_Fr%C3%BChling.JPG?utm_source=de.wikipedia.org&utm_campaign=parser&utm_content=thumbnail","class":"grau-filter"},"style":{"left":"465px","top":"41px","width":"381px","height":"285px"},"widgetSet":"basic"}]