CSS clip-Eigenschaft

Die clip-Eigenschaft ermöglicht es, ein positioniertes Element mit einem Rechteck zu beschneiden. Das Rechteck wird als vier Koordinaten angegeben: top, right, bottom, left. Diese Werte definieren Versätze zur Polsterkante des Elements. Die Reihenfolge rect(top, right, bottom, left) folgt einem Uhrzeigersinn, beginnend von oben. Alle vier Seiten können entweder eine Länge oder auto sein. auto ist der Standardwert.

Die clip-Eigenschaft funktioniert nicht, wenn der Wert der overflow-Eigenschaft auf visible gesetzt ist.

INFO

Falls möglich, kann stattdessen die neuere clip-path-Eigenschaft verwendet werden, da die clip-Eigenschaft veraltet ist und aus der CSS-Spezifikation entfernt wurde. Verwenden Sie für moderne Browser clip-path: inset(top right bottom left) oder clip-path: rect(...) als direkten Ersatz.

Ausgangswert	auto
Gilt für	Absolut positionierte Elemente.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS2
DOM-Syntax	object.style.clip = "rect(10px,40px,40px,10px)";

Syntax

Syntax der CSS clip-Eigenschaft

css

clip: auto | shape | initial | inherit;

Beispiel zur clip-Eigenschaft:

Beispiel zur CSS clip-Eigenschaft mit dem Wert auto

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        clip: auto;
      }
    </style>
  </head>
  <body>
    <img src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3docs.com" />
  </body>
</html>

Try it Yourself »

Ergebnis

CSS clip Property

Im folgenden Beispiel wird das Bild entsprechend der festgelegten Werte beschnitten.

Beispiel zur clip-Eigenschaft mit dem Wert „rect“:

Beispiel zur CSS clip-Eigenschaft mit dem Wert shape

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        clip: rect(0px, 70px, 200px, 0px);
      }
    </style>
  </head>
  <body>
    <img src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3docs.com logo" />
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung	Ausführen »
auto	Beschneidet ein Element nicht. Dies ist der Standardwert.	Play it »
shape	Beschneidet ein Element. Der einzige gültige Wert ist `rect(top, right, bottom, left)`.	Play it »
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.	Play it »
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

Praxis

Welche Funktion hat die 'clip'-Eigenschaft in CSS?

Sie verhindert, dass ein Element Platz auf der Seite einnimmt.Sie hilft dabei, Teile von Elementen auszublenden.Sie ändert die Farbe eines Elements.Sie definiert einen rechteckigen Bereich, um ein absolut positioniertes Element zu beschneiden.Sie fügt einem Element einen Rand hinzu.

CSS clip-Eigenschaft ​

Syntax ​

Beispiel zur clip-Eigenschaft: ​

Ergebnis ​

Beispiel zur clip-Eigenschaft mit dem Wert „rect“: ​

Werte ​