CSS-Eigenschaft clip

Die CSS-Eigenschaft clip ermöglicht es einem Rechteck, ein positioniertes Element zu schneiden. Das Rechteck wird als vier Koordinaten angegeben: oben, rechts, unten, links. Die Werte von oben und unten geben Offsets vom inneren oberen Rand des Rahmens an, während die Werte von rechts und links Offsets vom inneren linken Rand des Rahmens angeben. Alle vier Seiten können entweder den Wert auto oder shape haben. "Auto" ist der Standardwert.

Anfangswert auto
Gilt für "Absolut" positionierte Elemente
Geerbt Nein
Animierbar Ja, Background-color ist animierbar.
Version CSS2
DOM Syntax object.style.clip = "rect(10px,40px,40px,10px)";

Syntax

clip: auto | shape | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img {
      position: absolute;
      clip: auto;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
  </body>
</html>

Im folgenden Beispiel schneidet das Rechteck das Bild entsprechend den eingestellten Werten ein.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img {
      position: absolute;
      clip: rect(0px,70px,200px,0px);
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
  </body>
</html>

Werte

Wert Beschreibung
auto Es schneidet kein Element. Das ist der Defaultwert.
shape Clipsen eines Elements. Der einzige gültige Wert ist: rect (oben, rechts, unten, links).
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 7.0+

Übe dein Wissen

Welche der folgenden Aussagen über die CSS-Eigenschaft 'clip' ist/sind korrekt?
Finden Sie das nützlich?