Die filter()-Funktion von CSS – Filter nur auf Background-Images anwenden

Die Filter-Effekte von CSS wirken sich normalerweise auf das gesamte Element aus. Wendet man beispielsweise den Weichzeichnungsfilter an, werden sowohl die Textinhalte, als auch Konturen, Hintergrundbilder etc. unscharf. Mit Hilfe der Filter-Funktion von CSS kann ein Filter nur auf das Hintergrundbild angewendet werden.

Übersicht CSS Filter-Effekte

In CSS existieren zahlreiche Filter-Effekte, die allesamt in Kombination mit der Filter-Funktion eingesetzt werden können:

Eine detaillierte Übersicht haben wir in einem eigenen Artikel zusammengestellt: CSS Filter-Effekte

Handhabung der CSS Filter-Funktion

Wie alle CSS-Funktionen wird auch die Filter-Funktion mit runden Klammern geschrieben. Innerhalb der Eigenschaft background wird die Funktion notiert und erwartet dann eine URL sowie mindestens einen Filter.

Der Grundaufbau sieht so aus:

div {
   background: filter(url(<BILD>), <FILTER>, <FILTER2>);
}

Das folgende Beispiel zeichnet das Hintergrundbild weich:

div {
   background: filter(url(image.jpg), blur(8px));
}

Beispiel anschauen

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the css-filter-function feature across the major browsers from caniuse.com

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 8 Kommentare

  1. Thomas
    schrieb am 05.12.2022 um 17:04 Uhr:

    Danke für den Beitrag, aber es wäre echt mega gut.. wenn der Hinweis zur – weiterhin – miesen Browser Kompatibilität an erster Stelle stünde, das Feature ist leider weiterhin nicht auf Live Seiten zu gebrauchen und so spart man sich diesen vergeblichen Versuch.

    Antworten
  2. Hessi
    schrieb am 19.02.2021 um 10:52 Uhr:

    Hallo Jonas,

    vielen Dank erstmal für Deine guten, verständlichen Tipps. Die helfen mir schon seit vielen Jahren. Kulturbanause ist immer meine erste Anlaufstelle, wenn ich wissen will, die ein CCS-Befehl funktioniert, bzw. welcher Befehl mir weiterhelfen könnte. Das ist mit Abstand die Site, die es am besten erklärt und nicht ewig lange drum herumredet. Besser geht es nicht.

    Sorry, dass ich nicht schon viel früher einen Dank dagelassen habe.

    Ich habe aber nun genau das Problem, dass bei mir ein Hintergrundbild das Lesen erschwert. Das Bild habe ich schon x-mal angepasst und immer wieder hochgeladen, aber das ist tatsächlich eine mühsame und zeitaufwändige Sache.

    Wie Du korrekt anmerkst, wird der Filter auf den gesamten Container angewendet, was natürlich nicht so zielführend ist. Ich sehe es aber richtig, dass es immer noch keine breit unterstützte Möglichkeit gibt, das Backgroundimage via CSS zu verändern?

    Danke
    Gruß
    Michael

    Antworten
    • Jonas Hellwig
      schrieb am 22.02.2021 um 07:56 Uhr:

      Hallo Hessi, vielen Dank für dein Feedback! Du könntest ggf. mit dem Backdrop Filter weiterkommen.

      Antworten
  3. Gast
    schrieb am 21.07.2020 um 18:00 Uhr:

    Das Beispiel funktioniert im Firefox leider immer noch nicht…

    Antworten
  4. Felix
    schrieb am 13.05.2018 um 15:00 Uhr:

    Das Beispiel funktioniert nicht!

    Antworten
    • Jonas Hellwig
      schrieb am 18.05.2018 um 10:09 Uhr:

      Das Beispiel funktioniert in kompatiblen Browsers. Z. B. in Safari.

      Antworten
      • jonny
        schrieb am 20.11.2018 um 00:20 Uhr:

        Leider auch dort nicht.

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →