CSS-Eigenschaft filter

Die Eigenschaft filter wendet visuelle Effekte auf ein Element (Bild) an. Die Eigenschaft filter hat die folgenden Werte:

  • none
  • blur
  • brightness
  • contrast
  • drop-shadow
  • grayscale
  • hue-rotate
  • invert
  • opacity
  • saturate
  • sepia
  • url
Anfangswert none
Gilt für Table-Cell-Eelemente
Geerbt Nein
Animierbar Ja
Version CSS3
DOM Syntax object.style.WebkitFilter = "hue-rotate(360deg)";

Syntax

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img {
      -webkit-filter: blur(3px); /* Safari 6.0 - 9.0 */
      filter: blur(3px);
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft filter</h2>
    <p>Für dieses Bild wird der Filter auf "blur(3px)" gesetzt.</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image">
    </p>
  </body>
</html>

Lassen Sie uns das Bild im folgenden Beispiel heller machen:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img {
      -webkit-filter: brightness(120%);/* Safari 6.0 - 9.0 */
      filter: brightness(150%);
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft filter</h2>
    <p>Für dieses Bild wird der Filter auf "brightness(150%)" gesetzt.</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image"> 
    </p>
  </body>
</html>

In den folgenden Beispielen macht der Wert "greyscale" das Bild grau:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img {
      -webkit-filter: grayscale(80%);/* Safari 6.0 - 9.0 */
      filter: grayscale(80%);
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft filter</h2>
    <p>Für dieses Bild wird der Filter auf "grayscale(80%)" gesetzt.</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image">
    </p>
  </body>
</html>

Hier wird der Filter "saturate" auf das Bild angewendet, wo der angegebene Wert 300% beträgt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img {
      -webkit-filter: saturate(300%);/* Safari 6.0 - 9.0 */
      filter: saturate(300%);
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft filter</h2>
    <p>Für dieses Bild wird der Filter auf "saturate(300%)" gesetzt.</p>
    <p>
      <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image">
    </p>
  </body>
</html>

Werte

Wert Beschreibung
none Es wendet keinen Effekt an. Das ist der Standardwert dieser Eigenschaft.
blur Es wendet Unschärfe auf ein Bild an. Sie wird von px angegeben. Je größer der Wert, desto mehr Unschärfe wird angewendet. Wenn kein Wert angewendet wird, wird 0 verwendet.
brightness Es macht das Bild heller. Wenn der Wert 0 ist, ist das Bild schwarz. 100% ist der Standardwert und zeigt das Originalbild an. Bei Werten über 100% wird das Bild heller.
contrast Es regelt den Kontrast eines Bildes. Wenn der Wert 0 ist, ist das Bild schwarz. 100% ist der Standardwert und zeigt das Originalbild an. Werte über 100% mehr Kontrast werden auf das Bild angewendet.
drop-shadow Es wendet einen Schlagschatteneffekt auf das Bild an.
grayscale Es ändert das Bild in Graustufen. 0% ist der Wert des Originalbildes. 100% macht das Bild grau. Negative Werte sind nicht erlaubt.
hue-rotate Es wirkt einen Farbton-Rotationseffekt auf das Bild. Sie wird in Grad angegeben. Der Maximalwert ist 360 Grad.
invert Es invertiert die Samples im Bild. 0% ist der Standardwert. 100% macht das Bild vollständig invertiert.
opacity Es setzt die Deckkraftstufe für das Bild. Es beschreibt die Transparenz des Bildes. Wenn das Bild einen Wert von 0% hat, ist es völlig transparent. 100% ist der aktuelle Zustand des Bildes.
saturate Es wendet den Sättigungseffekt auf das Bild an. 0% macht das Bild völlig ungesättigt. 100% ist der Standardwert des Bildes. Die Werte über 100% machen das Bild übersättigt.
sepia Es wandelt das Bild in sepia um. Standardwert ist 0%, 100% macht das Bild komplett sepia.
url Die Funktion Url nimmt den Speicherort einer XML-Datei an, die einen SVG-Filter spezifiziert, und kann einen Anker zu einem bestimmten Filterelement beinhalten.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
53.0
18.0 -webkit-
12.0
-webkit-
35.0
+ 49.0 -webkit-
6.0
-webkit-
40.0
+ 15.0 -webkit-

Übe dein Wissen

Was ist eine CSS-Filtrierung?
Finden Sie das nützlich?