W CSS właściwość filter pozwala nakładać na elementy efekty przetwarzania obrazu na etapie renderowania w przeglądarce. Kod:
img { filter: grayscale(100%); }
dotyczy wszystkich elementów img na stronie (selektor typu), a funkcja grayscale(…) zmniejsza nasycenie barw aż do całkowitej desaturacji. Parametr 100% oznacza maksymalną intensywność efektu, czyli obraz jest wyświetlany wyłącznie w odcieniach szarości.
Dlaczego pozostałe odpowiedzi są niepoprawne:
- "Obrazy będą wyświetlane w pełnym kolorze." – to odpowiadałoby brakowi filtra albo wartości 0% (brak efektu). W pokazanym kodzie filtr jest aktywny i ustawiony na maksimum.
- "Obrazy będą wyświetlane w negatywie." – negatyw uzyskuje się filtrem typu invert(), a nie grayscale(). Skala szarości nie odwraca jasności i barw, tylko usuwa informację o kolorze.
- "Obrazy będą wyświetlane z zastosowaniem efektu sepia." – sepia ma charakterystyczne "brązowe" zabarwienie i odpowiada funkcji sepia(). Skala szarości daje neutralne odcienie od czerni do bieli.
W praktyce to częsty zabieg w projektach multimedialnych i fotograficznych online, np. gdy zdjęcia w galerii są domyślnie odbarwione, a po najechaniu kursorem wracają do koloru (zmiana filtra w stanie :hover). Ważne: filtr nie zmienia pliku JPG/PNG na dysku – zmienia tylko sposób wyświetlania w przeglądarce.
