CSS-Eigenschaft filter

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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.